CSS text-decoration property

Definition and Usage

The text-decoration property specifies the decoration to be added to the text.

Note:The color of the decoration is set by the "color" property.

Description

This property allows you to set some effects on text, such as underlining. If the descendant elements do not have their own decorations, the decorations set on the ancestor elements will 'extend' to the descendant elements. It is not required that the user agent supports blink.

See also:

CSS Tutorial:CSS Text

HTML DOM Reference Manual:textDecoration Property

Example

Sets the text decoration of h1, h2, h3, h4 elements:

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

Try it yourself

CSS Syntax

text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness|initial|inherit;

Property Value

Value Description
text-decoration-line Sets the type of text decoration to be used (such as underline, overline, line-through).
text-decoration-color Sets the color of the text decoration.
text-decoration-style Sets the style of text decoration (such as solid, wavy, dotted, dashed, double).
text-decoration-thickness Sets the thickness of the decoration line.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: none
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.textDecoration="overline"

More examples

Decorated text
This example demonstrates how to add decorations to text.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 3.0 1.0 1.0 3.5