CSS Text Decoration Styles

Specify a Style for the Decoration Line

The text-decoration-style property sets the style of the decoration line. It can take one of these values:

solid — the default, a single line.
double — a double line.
dotted — a dotted line.
dashed — a dashed line.
wavy — a wavy line.

Example

Each element shows a different underline style.

An HTML page that shows the text-decoration-style property.

In an internal `<style>` block, underline several elements with different styles: solid, double, dotted, dashed, wavy, and a red wavy one. Use h1, h2, h3, and paragraph classes. Add an element for each.

> Output: complete HTML page

Prompt

An HTML page that shows the text-decoration-style property. In an internal <style> block, underline several elements with different styles: solid, double, dotted, dashed, wavy, and a red wavy one. Use h1, h2, h3, and paragraph classes. Add an element for each.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}
</style>
</head>
<body>

<h1>Solid underline</h1>
<h2>Double underline</h2>
<h3>Dotted underline</h3>
<p class="ex1">Dashed underline.</p>
<p class="ex2">Wavy underline.</p>
<p class="ex3">Red wavy underline.</p>

</body>
</html>

Specify the Thickness for the Decoration Line

The text-decoration-thickness property sets the thickness of the decoration line.

Example

Each element shows a different underline thickness: auto, 5px, 25%, and a thick double line.

An HTML page that shows the text-decoration-thickness property.

In an internal `<style>` block, underline elements with different thicknesses: auto, 5px, 25%, and a paragraph combining a red double underline at 5px thickness. Use h1, h2, h3, and a paragraph. Add an element for each.

> Output: complete HTML page

Prompt

An HTML page that shows the text-decoration-thickness property. In an internal <style> block, underline elements with different thicknesses: auto, 5px, 25%, and a paragraph combining a red double underline at 5px thickness. Use h1, h2, h3, and a paragraph. Add an element for each.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}
</style>
</head>
<body>

<h1>Auto thickness</h1>
<h2>5px thickness</h2>
<h3>25% thickness</h3>
<p>A red double underline that is 5px thick.</p>

</body>
</html>

The Shorthand Property

The text-decoration property is a shorthand for: text-decoration-line (required), text-decoration-color (optional), text-decoration-style (optional), and text-decoration-thickness (optional).

Example

The shorthand sets the line, color, style, and thickness in one declaration.

An HTML page that shows the text-decoration shorthand property.

In an internal `<style>` block, use the shorthand on four elements: underline; underline red; underline red double; and underline red double 5px. Use h1, h2, h3, and a paragraph. Add an element for each.

> Output: complete HTML page

Prompt

An HTML page that shows the text-decoration shorthand property. In an internal <style> block, use the shorthand on four elements: underline; underline red; underline red double; and underline red double 5px. Use h1, h2, h3, and a paragraph. Add an element for each.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}
</style>
</head>
<body>

<h1>underline</h1>
<h2>underline red</h2>
<h3>underline red double</h3>
<p>underline red double 5px</p>

</body>
</html>

A Small Tip on Links

All links are underlined by default. Sometimes you see links with no underline. Use text-decoration: none to remove the underline from links.

Example

The underline is removed from the links.

An HTML page that removes the default underline from links.

In an internal `<style>` block, set `a { text-decoration: none; }` so links are not underlined. Add a couple of links.

> Output: complete HTML page

Prompt

An HTML page that removes the default underline from links. In an internal <style> block, set a { text-decoration: none; } so links are not underlined. Add a couple of links.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a {
  text-decoration: none;
}
</style>
</head>
<body>

<p>These links have no underline:</p>
<a href="https://prompt-cookbook.com">PromptCookbook</a>
<a href="https://www.example.com">Example</a>

</body>
</html>