CSS Overline Generator

Generate CSS text-decoration overline styles with live preview

Live Preview

Sample Text

text-decoration: overline;
text-decoration-color: #3b82f6;
text-decoration-thickness: 2px;
text-decoration-style: solid;

The text-decoration: overline property adds a line above the text.

It can be customized with color, thickness, and style properties, just like underline.

Overlines are less common than underlines but can be useful for special design effects or to denote specific meanings in typography.

text-decorationAll browsers

text-decoration-colorModern browsers

text-decoration-thicknessChrome 87+, Firefox 70+

wavy styleChrome 57+, Firefox 36+