CSS text-decoration Property

February 10, 2021 12:37 pm IST

You are Here:

Demo

This demo uses shorthand property 'text-decoration'.

This is a sentence.

CSS text-decoration Property

CSS text-decoration property sets the appearance of decorative lines on text. It is a shorthand property of the following CSS properties

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p{ font-size: 20px; text-decoration: underline red wavy; } </style> </head> <body> <h1>CSS text-decoration-style Property</h1> <p>This is a sentence.</p> </body> </html>

Run

Syntax

Using CSS

element{ text-decoration: underline red wavy; }

Using Javascript

object.style.textDecoration="underline red wavy";

Animatable

No, text-decoration property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS text-decoration property is none pageTextColor solid.

Property Value

Value	Type	Explanation
text-decoration-line	Required	Specifies the kind of line to be used for text decoration.
text-decoration-color	Optional	Specifies the color to be used for text decoration line.
text-decoration-style	Optional	Specifies the style to be used for text decoration line.

Using JavaScript

In the following example, we will demonstrate how to change the CSS text-decoration property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS text-decoration Property</h1> <p style="text-decoration-line: underline">This is a sentence</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ x.style.textDecoration = "underline red solid"; } </script> </body> </html>

Run