CSS Text Decoration | CSS Features

`text-decoration`

Property Baseline: widely availablesince January 2018

MDN The text-decoration CSS shorthand property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property.

Live preview Example from MDN

p {
  font: 1.5em sans-serif;
}

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

Syntax

<'text-decoration-line'> || <'text-decoration-thickness'> || <'text-decoration-style'> || <'text-decoration-color'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Canonical order: per grammar
Animation type: see individual properties
Longhands: text-decoration-line, text-decoration-thickness, text-decoration-style, text-decoration-color

Browser support

First browser version supporting text-decoration
Chrome	1
Edge	12
Firefox	1
Safari	1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`text-decoration-color`

Property Baseline: widely availablesince January 2018

MDN The text-decoration-color CSS property sets the color of decorations added to text by text-decoration-line.

Live preview Example from MDN

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-decoration-line: underline;
}

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

Syntax

<color>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: currentcolor
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: computed color
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting text-decoration-color
Chrome	57
Edge	79
Firefox	36
Safari	12.1
Chrome Android	57
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

MDN The text-decoration-inset CSS property enables adjusting the start and end points of an element's text decoration so it can be shortened, lengthened, or have its position shifted with respect to the rendered text.

Live preview Example from MDN

#example-element {
  font: 2.5em sans-serif;
  text-decoration: underline 0.3em limegreen;
}

<section id="default-example">
  <p id="example-element">Karmadrome</p>
</section>

Syntax

<length-percentage>{1,2} | auto

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: 0
Applies to: all elements
Inherited: no
Percentages: Depending on the value of box-decoration-break, either refer to the inline size of the decorating box or of each individual box fragment
Computed value: specified keyword or absolute length
Canonical order: per grammar
Animation type: by computed value

Browser support

First browser version supporting text-decoration-inset
Chrome	157
Edge	157
Firefox	146
Safari	Preview
Chrome Android	157
Safari iOS	No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`text-decoration-line`

Property Baseline: widely availablesince January 2018 Modern CSS: Spelling and grammar text decorations

MDN The text-decoration-line CSS property sets the kind of decoration that is used on text in an element, such as an underline or overline.

Live preview Example from MDN

p {
  font: 1.5em sans-serif;
}

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

Syntax

none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: all elements
Inherited: no (but see prose, above)
Percentages: n/a
Computed value: specified keyword(s)
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting text-decoration-line
Chrome	57
Edge	79
Firefox	36
Safari	12.1
Chrome Android	57
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`text-decoration-skip`

Property Deprecated

MDN The text-decoration-skip CSS property sets what parts of an element's content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

Live preview Example from MDN

p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: edges;
}

<p>Hey, grab a cup of <em>coffee!</em></p>

Syntax

none | auto

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: See individual properties
Applies to: all elements
Inherited: yes
Percentages: N/A
Computed value: See individual properties
Canonical order: per grammar
Animation type: discrete
Longhands: text-decoration-skip-self, text-decoration-skip-box, text-decoration-skip-spaces, text-decoration-skip-ink

Browser support

First browser version supporting text-decoration-skip
Chrome	57, removed in 64
Edge	No
Firefox	No
Safari	12.1
Chrome Android	57, removed in 64
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`text-decoration-skip-box`

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

none | all

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: all elements
Inherited: yes
Percentages: N/A
Computed value: specified keyword(s)
Canonical order: per grammar
Animation type: discrete

Specification ↗

`text-decoration-skip-ink`

Property Baseline: widely availablesince September 2024 Modern CSS: text-decoration-skip-ink: all

MDN The text-decoration-skip-ink CSS property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.

Live preview Example from MDN

p {
  font:
    1.9em "Georgia",
    serif;
  text-decoration: underline;
}

<section id="default-example">
  <p>
    <span class="transition-all" id="example-element">parapsychologists</span>
  </p>
</section>

Syntax

auto | none | all

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: all elements
Inherited: yes
Percentages: N/A
Computed value: specified keyword
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting text-decoration-skip-ink
Chrome	64
Edge	79
Firefox	70
Safari	15.4
Chrome Android	64
Safari iOS	15.4

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`text-decoration-skip-self`

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

auto | skip-all | [ skip-underline || skip-overline || skip-line-through ] | no-skip

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: specified keyword(s) except for skip-all, see below
Canonical order: per grammar
Animation type: discrete

Specification ↗

`text-decoration-skip-spaces`

Property Limited availability Experimental Modern CSS: text-decoration-skip-spaces

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

none | all | [ start || end ]

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: start end
Applies to: all elements
Inherited: yes
Percentages: N/A
Computed value: specified keyword(s)
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting text-decoration-skip-spaces
Chrome	155
Edge	No
Firefox	No
Safari	No
Chrome Android	No
Safari iOS	No

First version with support, from MDN browser-compat-data.

Specification ↗

`text-decoration-style`

Property Baseline: widely availablesince January 2018

MDN The text-decoration-style CSS property sets the style of the lines specified by text-decoration-line. The style applies to all lines that are set with text-decoration-line.

Live preview Example from MDN

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-decoration-line: underline;
}

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

Syntax

solid | double | dotted | dashed | wavy

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: solid
Applies to: all elements
Inherited: no
Percentages: n/a
Computed value: specified keyword
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting text-decoration-style
Chrome	57
Edge	79
Firefox	36
Safari	12.1
Chrome Android	57
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`text-decoration-thickness`

Property Baseline: widely availablesince January 2018

MDN The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.

Live preview Example from MDN

p {
  font: 1.5em sans-serif;
  text-decoration-color: red;
}

<section id="default-example">
  <p id="example-element">
    Confusion kissed me on the cheek, and left a taste so bittersweet
  </p>
</section>

Syntax

auto | from-font | <length-percentage> | <line-width>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: as specified, with <length-percentage> values computed
Canonical order: per grammar
Animation type: by computed value

Browser support

First browser version supporting text-decoration-thickness
Chrome	89
Edge	89
Firefox	70
Safari	12.1
Chrome Android	89
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`text-emphasis`

Property Baseline: widely availablesince September 2024

MDN The text-emphasis CSS shorthand property applies emphasis marks to text (except spaces and control characters).

Live preview Example from MDN

p {
  font: 1.5em sans-serif;
}

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

Syntax

<'text-emphasis-style'> || <'text-emphasis-color'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Computed value: see individual properties
Canonical order: per grammar
Animation type: see individual properties
Longhands: text-emphasis-style, text-emphasis-color

Browser support

First browser version supporting text-emphasis
Chrome	99
Edge	99
Firefox	46
Safari	7
Chrome Android	99
Safari iOS	7

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`text-emphasis-color`

Property Baseline: widely availablesince September 2024

MDN The text-emphasis-color CSS property sets the color of emphasis marks. This value can also be set using the text-emphasis shorthand.

Live preview Example from MDN

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-emphasis: filled;
}

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

Syntax

<color>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: currentcolor
Applies to: text
Inherited: yes
Percentages: n/a
Computed value: computed color
Canonical order: per grammar
Animation type: by computed value type

Browser support

First browser version supporting text-emphasis-color
Chrome	99
Edge	99
Firefox	46
Safari	7
Chrome Android	99
Safari iOS	7

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`text-emphasis-position`

Property Baseline: widely availablesince September 2024

MDN The text-emphasis-position CSS property sets where emphasis marks are drawn. Similar to the text rendered by the <ruby> HTML element, if there isn't enough room for emphasis marks, the line height is increased.

Live preview Example from MDN

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-emphasis: filled double-circle #ffb703;
}

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

Syntax

[ over | under ] && [ right | left ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: over right
Applies to: text
Inherited: yes
Percentages: n/a
Computed value: specified keyword(s)
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting text-emphasis-position
Chrome	99
Edge	99
Firefox	46
Safari	7
Chrome Android	99
Safari iOS	7

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`text-emphasis-skip`

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

spaces || punctuation || symbols || narrow

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: spaces punctuation
Applies to: text
Inherited: yes
Percentages: N/A
Computed value: specified keyword(s)
Canonical order: per grammar
Animation type: discrete

Specification ↗

`text-emphasis-style`

Property Baseline: widely availablesince September 2024

MDN The text-emphasis-style CSS property sets the appearance of emphasis marks. It can also be set, and reset, using the text-emphasis shorthand.

Live preview Example from MDN

p {
  font: 1.5em sans-serif;
}

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

Syntax

none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: text
Inherited: yes
Percentages: n/a
Computed value: the keyword none, a pair of keywords representing the shape and fill, or a string
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting text-emphasis-style
Chrome	99
Edge	99
Firefox	46
Safari	7
Chrome Android	99
Safari iOS	7

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`text-shadow`

Property Baseline: widely availablesince January 2018

MDN The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its text-decoration. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.

Live preview Example from MDN

p {
  font:
    1.5em "Georgia",
    serif;
}

<section id="default-example">
  <p id="example-element">
    Far out in the uncharted backwaters of the unfashionable end of the western
    spiral arm of the Galaxy...
  </p>
</section>

Syntax

none | <shadow>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: none
Applies to: text
Inherited: yes
Percentages: n/a
Computed value: either the keyword none or a list, each item consisting of four absolute lengths plus a computed color and optionally also an inset keyword
Canonical order: per grammar
Animation type: as shadow list

Browser support

First browser version supporting text-shadow
Chrome	2
Edge	12
Firefox	3.5
Safari	1.1
Chrome Android	18
Safari iOS	1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`text-underline-offset`

Property Baseline: widely availablesince May 2023

MDN The text-underline-offset CSS property sets the offset distance of an underline text decoration line (applied using text-decoration) from its original position.

Live preview Example from MDN

p {
  font: 1.5em sans-serif;
  text-decoration-line: underline;
  text-decoration-color: red;
}

<section id="default-example">
  <p id="example-element">And after all we are only ordinary</p>
</section>

Syntax

auto | <length-percentage>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: all elements
Inherited: yes
Percentages: N/A
Computed value: as specified, with <length-percentage> values computed
Canonical order: per grammar
Animation type: by computed value

Browser support

First browser version supporting text-underline-offset
Chrome	87
Edge	87
Firefox	70
Safari	12.1
Chrome Android	87
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

`text-underline-position`

Property Baseline: widely availablesince January 2023

MDN The text-underline-position CSS property specifies the position of the underline which is set using the text-decoration property's underline value.

Live preview Example from MDN

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-decoration-line: underline;
}

<section id="default-example">
  <p>
    <span class="transition-all" id="example-element"
      >C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub></span
    >
    is the chemical formula for caffeine.
  </p>
</section>

Syntax

auto | [ from-font | under ] || [ left | right ]

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial: auto
Applies to: all elements
Inherited: yes
Percentages: n/a
Computed value: specified keyword(s)
Canonical order: per grammar
Animation type: discrete

Browser support

First browser version supporting text-underline-position
Chrome	33
Edge	12
Firefox	74
Safari	12.1
Chrome Android	33
Safari iOS	12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

Each feature in detail

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Syntax

Definition

Browser support

Syntax

Definition

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support

Syntax

Definition

Browser support