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

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

setting your text to display inline (actually, it should be that by default) will cause the border-bottom to render much as a text-decoration rule.

however, i presume that you want to use this technique on links by doing the following:

/* my super eye catching dual colour link */
a {
  color:black;
  border-bottom:1px solid red;
}

which is all well and good, but you'll find that wherever you have an img tag inside a link, the image will have a red border under it.

if you can figure out a way to target the parent of a page element (the image) using existing selectors and no javascript, i'll buy you a beer but i don't think you'll have much luck.

using "text-decoration" avoids this issue altogether as an image is clearly not text, it will not render an underline when inside a link.

if you have complete control over your markup, i suppose you can bumble your way through by adding classes to every link, but if you're working with any popular CMS system, you're going to struggle with this idea.

Answer 4

While there are always going to be cases where one is more appropriate than the other, border-bottom offers much more precise control over text-decoration and is therefore probably the preferred method. Here's a quick (likely not exhaustive) list of properties that border-bottom can control/enable that text-decoration cannot:

1. Spacing between text and "underline"
2. "Underline" style (dotted, dashed, solid, gradient, image)
3. Thickness
4. CSS transitions/animations
5. Separation of color between text and "underline"

In many cases, most of these abilities will not be needed - but it is good to have them available! I've switched to using border-bottom primarily for the ability to put a few pixels of padding between the text and the underline; the next most common use I've found is divorcing the underline color from the text color.

With CSS variables now shipping in every major browser, a "reset" stylesheet might look something like this:

:root {
    --link-color: blue;
    --hover-color: purple;
    --underline-color: var(--link-color);
}

a {
    color: var(--link-color);
    text-decoration: none;
    border-bottom: 1px solid var(--underline-color);
}

a:hover {
    color: var(--hover-color);
    border-bottom-color: var(--hover-color);
}

This way, links will display as expected on a "default" basis, yet still allow for customization as needed.

Answer 5

Sorry to say this, but some answers here are misleading. Splitting a line of text does not place the border at the bottom of the entire block, because of the nature of inline blocks. Borders under links are actually more consistent across browsers than text-decoration: underline.

See: Text-Decoration vs. Border-Bottom

Answer 6

Try this border with 1px image

a:hover {
    background: url("img/bg-link-hover.png") repeat-x scroll 0px 92% transparent;
    background-color: transparent;
    background-image: url("img/bg-link-hover.png");
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: 0px 92%;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
}