Dotted hyperlinks

Nowadays a lot of web sites have their hyperlinks underlined with a dotted line instead of a plain line. In this small article you will learn how to do this effect.

Hyperlinks are usually presented with a plain line, and this line is not configurable with (X)HTML. For changing the presentation of a hyperlink, it is necessary to play with the CSS, but even though you cannot configure this line.

The trick to have a hyperlink with a dotted line is to remove the line! For doing so, you can use the style property text-decoration. This property has several possible values:

  • none
  • underline
  • overline
  • line-through
  • blink

You probably guessed that we choose the first of the values listed above:

<a href="" style="text-decoration: none">Hyperlink</a>

and the result looks like this:


Now we are using another property: border-style or in our case, border-bottom-style. This property has several possible values too:

  • none
  • hidden
  • dotted
  • dashed
  • double
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

As you guessed once again, we choose the third option:

<a href="" style="text-decoration: none; border-bottom-style:dotted;">Hyperlink</a>

and voilà ! here is the result:


But then it feels like the dots are too big. We are now using a property called border-bottom-width for reducing their size:

<a href="" style="text-decoration: none; border-bottom-style:dotted;border-bottom-width: 1px">Hyperlink</a>

and our hyperlink is finally trendy: