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?

when we should use border-bottom over text-decoration:underline?

Would it be good to use border-bottom always in place of text-decoration:underline?

Answer 1

border-bottom puts a line at the bottom of the element box. text-decoration:underline renders the text underlined. The exact difference depends on the HTML and text layout engines in use, but in general if you want text underlined, then underline it.

Answer 2

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'.

Answer 3

As Ignacio said, border-bottom will put the line at the bottom of the containing box, whereas text-decoration:underline will actually underline the text. This becomes an important distinction for multi-line strings.

I am a single line and will look similar for both methods
---------------------------------------------------------

would probably render the same for both styles, but you'll get the following for multi-line strings.

I am a string that has been
split and added a border-bottom
-------------------------------

I am a string that has been
---------------------------
split and underlined
--------------------

Apologies for using code formatting rather than properly rending these examples, but you can see the point I'm trying to make.