Double Underline and Double Overline Text with CSS

For some certain display or emphasis purposes in your content, you may need to have double underlined or double overlined text on your web pages. Since a CSS property to create double lines above or below text does not exist, a simple workaround should be used to create this effect.

We will first give samples for double underlined and overlined text below and then talk about how to achieve create them using simple CSS styles:

Double Overlined Text

Double Underlined Text

Method 1

In the first method, we use top or bottom borders with double lines to give this effect. The following code will create double underlined text:

<style>
.double-underline {
border-bottom: 4px double;
}
</style>
<p><span class="double-underline">Double Underlined Text</span></p>

The reason we are displaying our text within a span element is that you can use span elements in any other element such as divisions (div) or paragraphs (p).

You can change the width (4px) of the border as you wish. The lowest pixel width you can use is 3px, since at 2px the lines touch each other, resulting in a single line. You can see double underlines with different sizes below:

Double Underlined Text - 3px wide

Double Underlined Text - 4px wide

Double Underlined Text - 5px wide

To create a double overline with this method, simply replace border-bottom property with border-top property.

Method 2

In the second method, we use border-bottom/border-top and text-decoration properties to create this effect. Please check the code below to see it in action.

<style>
.double-underline {
border-bottom: 1px solid;
text-decoration: underline;
}
</style>
<p><span class="double-underline">Double Underlined Text</span></p>

Here is the result of the above code:

Double Underlined Text

To create a double overline with this method use the following code:

<style>
.double-overline {
padding-top: 1px;
border-top: 1px solid;
text-decoration: overline;
}
</style>
<p><span class="double-overline">Double Overlined Text</span></p>

Double Overlined Text

The first method seems to give a better result as the space between the text and the first line looks better. Use whichever method you think that will best suit your design.

f t g+ in