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

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.