Text Decoration Styles

Specify a Style for the Decoration Line

The CSS text-decoration-style property sets the style of the decoration line.

This property can have one of the following values:

• solid - Default value. Single line
• double - Double line
• dotted - Dotted line
• dashed - Dashed line
• wavy - Wavy line

Example

  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;
}

Specify the Thickness for the Decoration Line

The CSS text-decoration-thickness property is used to set the thickness of the decoration line.

Example

  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;
}

The Shorthand Property

The CSS text-decoration property is a shorthand property for:

• text-decoration-line (required)
• text-decoration-color (optional)
• text-decoration-style (optional)
• text-decoration-thickness (optional)

Example

  h1 {
  text-decoration: underline;
}

h2 {

  text-decoration: underline red;
}

h3 {
  text-decoration: underline
  red double;
}

p {

  text-decoration: underline red double 5px;
}

A Small Tip on Links

All links in HTML are underlined by default. Sometimes you see that links are styled with no underline. The text-decoration: none; is used to remove the underline from links, like this:

Example

a {
  text-decoration: none;
}