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

Example Code

css

Try it Yourself

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

Example Code

css

Try it Yourself

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

Example Code

css

Try it Yourself

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

Example Code

css

Try it Yourself

a {
  text-decoration: none;
}

Specify a Style for the Decoration Line

Example

Example Code

Specify the Thickness for the Decoration Line

Example

Example Code

The Shorthand Property

Example

Example Code

A Small Tip on Links

Example

Example Code

Interactive Code Examples

CSS Example 1

CSS Example 2

CSS Example 3

CSS Example 4