Set CSS Border Color to text color

Question

Is there a way to set the border-color in CSS to be the same as the text color?

For instance having a class which adds a bottom dotted border, but leavi

Answer 1

You actually get this behavior for free; it's mentioned in the spec:

If an element's border color is not specified with a border property, user agents must use the value of the element's 'color' property as the computed value for the border color.

So all you have to do is omit the color when using the border shorthand property:

.dotted-underline {
    border-bottom: dotted 1px;
}

Or only use the border-style and border-width properties, and not border-color:

.dotted-underline {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

Or, in browsers that support the new CSS3 keyword currentColor, specify that as the value for border-color (useful for overriding existing border-color declarations):

.dotted-underline {
    border-bottom-color: currentColor;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

The color that the border takes on will be the same as the text color by default.

Answer 2

This:

border-bottom: 1px dotted currentColor;

From the spec:

currentColor The value of the ‘color’ property. The computed value of the ‘currentColor’ keyword is the computed value of the ‘color’ property. If the ‘currentColor’ keyword is set on the ‘color’ property itself, it is treated as ‘color: inherit’.

See here: http://www.w3.org/TR/css3-color/#currentcolor

(doesn't work in IE8 though)

---

Update: So, it seems that explicitly setting the color value is not necessary, since the default value already is the value of the color property.

So, this works just fine:

border-bottom: 1px solid;

Answer 3

You will have to set these to be the same color yourself.

If you want your CSS to be more programmatic and DRY, you should use something like LESS. It can save you a lot of work, so you only have to declare that color once.