Home
CSS
CSS Text
Text Decoration
Tryit: Different styles for decoration lines
Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Save Code
Ctrl+Alt+A
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
<!DOCTYPE html> <html> <head> <style> h1 { text-decoration-line: underline; text-decoration-style: solid; /* this is default */ } 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; } </style> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <p class="ex1">A paragraph.</p> <p class="ex2">Another paragraph.</p> <p class="ex3">Another paragraph.</p> </body> </html>
