Currently Empty: ₹0.00
CSS Text Decoration
CSS CODES & EXAMPLES
CSS Text Decoration
Learn how to add, customize and control lines around text using CSS text-decoration properties, styles, colors and thickness.
01
What is Text Decoration?
Style text with decorative linesCSS text decoration is used to add decorative lines to text. You can create underlines, overlines and line-through effects. CSS also allows you to control the color, style and thickness of these lines.
Main Property:
text-decoration
02
text-decoration-line
Choose the type of decoration
The text-decoration-line property specifies which
decorative line should appear on the text.
text-decoration-line.css
.underline {
text-decoration-line: underline;
}
.overline {
text-decoration-line: overline;
}
.line-through {
text-decoration-line: line-through;
}Underline Text
Overline Text
Line Through Text
03
Underline
Add a line below the text
The underline value places a decorative line below
the text.
underline.css
h2 {
text-decoration-line: underline;
}CSS Text Decoration
04
Overline
Add a line above the text
The overline value creates a decorative line above
the text.
overline.css
h2 {
text-decoration-line: overline;
}CSS Overline Example
05
Line Through
Draw a line through text
The line-through value draws a line through the text.
It is often used for deleted, unavailable or previous prices.
line-through.css
.old-price {
text-decoration-line: line-through;
}₹2,999₹1,999OFFER
06
text-decoration-color
Change the decoration color
The text-decoration-color property controls the
color of the decorative line independently from the text color.
decoration-color.css
h2 {
text-decoration-line: underline;
text-decoration-color: #1769d5;
}Blue Decoration Line
07
text-decoration-style
Choose the decoration line style
The text-decoration-style property controls the
visual style of the decorative line.
solid
Solid Decoration
double
Double Decoration
dotted
Dotted Decoration
dashed
Dashed Decoration
wavy
Wavy Decoration
decoration-style.css
.solid {
text-decoration-style: solid;
}
.double {
text-decoration-style: double;
}
.dotted {
text-decoration-style: dotted;
}
.dashed {
text-decoration-style: dashed;
}
.wavy {
text-decoration-style: wavy;
}
08
text-decoration-thickness
Control the thickness of the line
The text-decoration-thickness property controls
how thick the decorative line appears.
2px
Thin Decoration
4px
Medium Decoration
7px
Thick Decoration
decoration-thickness.css
.example {
text-decoration-line: underline;
text-decoration-thickness: 4px;
}
09
Shorthand Property
Combine multiple decoration values
The text-decoration shorthand can combine the
decoration line, style, color and thickness into one declaration.
text-decoration.css
.heading {
text-decoration:
underline
wavy
#1769d5
3px;
}Complete Decoration Example
10
Multiple Text Decorations
Use more than one decoration line
You can apply multiple decoration lines by using more than one
value with text-decoration-line.
multiple-decoration.css
.example {
text-decoration-line:
underline overline;
}Multiple Decoration Lines
11
Links & Text Decoration
Remove or customize link underlines
By default, browsers usually display links with an underline.
You can remove it with text-decoration: none.
links.css
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
12
Hover Text Decoration
Add decoration when the user hovers
Text decoration can be combined with the :hover
pseudo-class to create interactive effects.
hover-decoration.css
.link {
text-decoration: none;
}
.link:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
}
13
Course Website Example
Professional educational designFEATURED COURSEONLINE
Diploma in Computer Application
Learn computer fundamentals, Microsoft Office, internet, digital services and practical computer applications.
₹4,999
₹2,999
View Course →
course-decoration.css
.old-price {
text-decoration: line-through;
text-decoration-color: #d94c4c;
}
.course-link {
text-decoration: none;
}
.course-link:hover {
text-decoration: underline;
}
14
Professional Heading Example
Use decoration as a design accentOUR COURSES
Career-Focused Computer Education
Learn practical skills with structured lessons, exercises and career-oriented computer courses.
heading-decoration.css
.heading span {
text-decoration:
underline
wavy
#1769d5
2px;
}
15
Best Practices
Use text decoration professionally
✓ Keep links recognizable
Do not remove visual link indicators without providing another clear interactive style.
✓ Use decoration for emphasis
Underlines and other decorations should support the content, not make it difficult to read.
✓ Use line-through carefully
It works well for old prices, completed items and unavailable content.
✓ Check readability
Avoid very thick or distracting decorative lines on normal body text.
16
Practice Task
Test your CSS Text Decoration skills🎯 Your Challenge
Create a professional course card using CSS text decoration.
- Add an underline to the course heading.
- Use a wavy underline for a highlighted word.
- Show the old course price with line-through.
- Customize the underline color.
- Change the decoration thickness.
- Create a hover underline for the course link.
- Try the shorthand
text-decorationproperty.
17
CSS Text Decoration Live Runner
Experiment with decoration propertiesLIVE PREVIEW
18
Quick Reference
Important properties at a glancetext-decoration
Shorthand property for text decoration.
text-decoration-line
Defines underline, overline or line-through.
text-decoration-color
Defines the decoration color.
text-decoration-style
Defines solid, double, dotted, dashed or wavy style.
text-decoration-thickness
Controls the thickness of the decoration line.