How to Change Link Underlines on a Web Page

This article explains several ways you can use CSS to change the default look of text links on your web page by removing the underline, changing it to a dotted line, or changing its color. Additional information is included for changing the underline to a dashed line or double underlines.

How to Remove the Underline on Text Links

By default, web browsers have certain CSS styles that they apply to specific HTML elements. If you don't overwrite these defaults with your site's own style sheets, then the defaults apply. For hyperlinks, the default display style is that any linked text is blue and underlined. If you want, you can change the look of those underlines or remove them completely from your webpage.

To remove the underlines from text links, you use the CSS property text-decoration. Here is the CSS you write to do this:

a { text-decoration: none; }

With that one line of CSS, you remove the underline from all text links on your webpage. Even though this is a very general style (it uses an element selector), it still has more specificity than the default browsers styles do. Because those default styles are what creates the underlines to begin with, that is what you need to overwrite.

A Caution on Removing Underlines

Visually, the removal of underlines may be exactly what you want to accomplish, but you should be cautious when you do this as well. Whether you like the look of underlined links or not, you cannot argue that they make it obvious as to which text is linked and which is not. If you take away underlines or change that default blue link color, you should make sure you replace them with styles that still allow linked text to stand out. This will make for a more intuitive experience for your site's visitors.

Do Not Underline Non-Links

Another caution on links and underlines, do not underline text that is not a link as a way of emphasizing it. People have come to expect underlined text to be a link, so if you underline content in order to add emphasis (instead of making it bold or italicizing it), you send the wrong message and will confuse site users.

How to Change the Underline to Dots or Dashes

If you want to keep your text link underlines, but change the style of that underline from the default look, which is a "solid" line, you can do this too. Instead of that solid line, you can use dots to underline your links. To do this, you will still remove the underline, but you will replace it with the border-bottom style property:

a { text-decoration: none; border-bottom:1px dotted; }

Since you've removed the standard underline, the dotted one is the only one that appears.

You can do the same thing to get dashes. Just change the border-bottom style to dashed:

a { text-decoration: none; border-bottom:1px dashed; }

How to Change the Underline Color

Another way to draw attention to your links is to change the color of the underline. Just make sure the color fits with your color scheme.

a { text-decoration: none; border-bottom:1px solid red; }

Double Underlines

The trick to using double underlines is that you have to change the width of the border. If you create a 1px wide border, you'll end up with a double underline that looks like a single underline.

a { text-decoration: none; border-bottom:3px double; }

You can also use the existing underline to make a double underline with other features, such as one of the lines being dotted:

a { border-bottom:1px double; }

Don't Forget the Link States

You can add the border-bottom style to your links at different states such as :hover, :active, or :visited. This can create a nice "rollover" style experience for visitors when you use that "hover" pseudo-class. To make a second dotted underline appear when you hover over the link:

a { text-decoration: none; }
a:hover { border-bottom:1px dotted; }