text-decoration-style - HTML CSS CSS Property

HTML CSS examples for CSS Property:text-decoration-style

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. text-decoration-style

Description

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

The following table summarizes the text-decoration-style Property.

Item Value
Default value: solid
Applies to:All elements. It also applies to ::first-letter and ::first-line.
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


text-decoration-style:     [ solid | double | dotted | dashed | wavy ] one or more values | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
solid displayed as a single line. This is default value.
double displayed as a double line.
dotted displayed as a dotted line.
dashed displayed as a dashed line.
wavydisplayed as a wavy line.
initial Sets this property to its default value.
inherit take the value of its parent element text-decoration-style property.

The example below shows the text-decoration-style property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 text-decoration-style Property</title>
  <style type="text/css">
  p {<!--from ww w . j a v a2  s  .c o  m-->
    text-decoration: underline;
    -moz-text-decoration-style: dotted; /* Firefox */
    text-decoration-style: dotted; /* Standard syntax */
  }
</style>
 </head>
 <body>
  <p>This is some decoration text.</p>
 </body>
</html>

Related Tutorials