text-decoration: underline vs border-bottom

Question

What is the difference to use {text-decoration: underline} and {border-bottom: ...}?

which is easy to style and cross browser compatible?

Answer 1

bottom-border lets you control the distance between the text and the underline, so its more versatile. And (as mentioned above) it allows a different color for the underline (although I don't see a reason why you'll want to do that).

text-decoration is more 'correct' because it is the 'real' CSS property meant for underlining text.

if you set text-decoration: underline for all links then you will have to set text-decoration: none for special links which you don't need an underline. but if you use border-bottom instead, you'll save one line of CSS code (provide you set text-decoration: none in your reset CSS.

so all in all, i'll vote for border-bottom if you have a complex layout with different styles for each link but text-decoration for a simple website coded 'by the book'.