How To: Add a Dotted Underline to Your Links

Estimated reading time: 1 minute, 4 seconds

Sick and tired of boring old underlines to show that a bit of text is a link? Here’s a really quick bit of CSS to show a dotted underline on your links (like this).

It’s so easy to do this that it hurts. We’re just swapping the underline for a border.

Dotted Underline on Hover Only

a:link, a:visited {
text-decoration: none; }
a:hover {
border-bottom: 1px dotted #000; }

What this does is remove the underline from the text so that when it’s not being hovered over there’s no underline. On hover, the dotted border appears.

Dotted Underline At All Times

a:link, a:visited {
text-decoration: none;
border-bottom: 1px dotted #000; }

This removes the underline and replaces it with the dotted border at all times.

Obviously a dotted border isn’t the only option out there. Play around with the other options and see what looks good and fits your site the best. Here’s the list of all of the types of borders that you can do.

CSS Border Types

p.solid {border-style: solid; }
p.double {border-style: double; }
p.groove {border-style: groove; }
p.dotted {border-style: dotted; }
p.dashed {border-style: dashed; }
p.inset {border-style: inset; }
p.outset {border-style: outset; }
p.ridge {border-style: ridge; }
p.hidden {border-style: hidden; }