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 leaving the color of said border to match the color of the text in much the same way as the color of text-decoration:underline is the color of the text (color property)?

An inverse of this question has been asked: [Why does CSS border color inherit from the font's color property?](http://stackoverflow.com/questions/34667409/why-does-css-border-color-inherit-from-the-fonts-color-property) — BoltClock, Jan 08 '16 at 03:39

BoltClock · Accepted Answer · 2015-02-25T17:01:45.037

86

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.

edited Feb 25 '15 at 17:01

answered Dec 29 '11 at 02:57

BoltClock

700,868
160
1,392
1,356

1

I'm not able to find that rule in the newer spec: http://www.w3.org/TR/css3-background/ - it could be that it has been removed in favor of `currentColor`... – Šime Vidas Dec 29 '11 at 03:08
I found it. The spec states that the initial value of the `border-*-color` properties is `currentColor` (which corresponds to the rule from CSS 2.1). – Šime Vidas Dec 29 '11 at 03:11
@Šime Vidas: It's actually the same behavior. All the CSS3 module does is provide a keyword that represents the currently-used color. – BoltClock Dec 29 '11 at 03:13
3

Just FYI, if the `border-color` for that element has ever been set in the past, you have to override it. You can't just specify a new rule `border-bottom: dotted 1px` because it will keep that color set previously; you're only changing the `border-style` and `border-width-bottom` properties. – animuson Dec 29 '11 at 03:14
1

Following up on @animuson's comment, on browsers that implement `currentColor` and have updated the relevant properties to support CSS3, you can in fact redeclare `border-bottom: dotted 1px` and they'll change all three properties, with `border-color` becoming `currentColor` again. Also, I just discovered that my demo doesn't work correctly in IE8 at all. I don't know if this is due to a bug or an ambiguity in the CSS2.1 spec (although it seems pretty clear to me what the initial value should be, and as I've mentioned the CSS3 module simply adds a keyword for specifying that value). – BoltClock Oct 19 '12 at 05:47
@BoltClock, I think you can use this one for IE8 (taken from bootstrap caret code)? border-bottom: 1px solid \9; // IE8 – Nov 09 '15 at 18:58
@Björn Ali Göransson: All that does is make it so only IE8 uses that declaration. It doesn't actually make it work. – BoltClock Nov 10 '15 at 03:07
@BoldCode Fair enough --- I have to test this in IE8 if I get a chance, because there are indicators ([this GitHub issue](https://github.com/twbs/bootstrap/issues/16172) for example) that it should in fact work – Nov 10 '15 at 21:55

Šime Vidas · Answer 2 · 2011-12-29T03:13:42.870

9

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;

edited Dec 29 '11 at 03:13

answered Dec 29 '11 at 03:00

Šime Vidas

182,163
62
281
385

+1 The good news is that it's related to the CSS1 and 2 behavior of using the `color` value as the initial value for `border-color` if it isn't specified, and that is very well-supported by all browsers. – BoltClock Dec 29 '11 at 03:06

score 0 · Answer 3 · answered Dec 29 '11 at 02:55

0

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.

answered Dec 29 '11 at 02:55

Josh Smith

14,674
18
72
118

This is not what he asked for! What if you don't know the color of the element, that you want to set the border on? No need for CSS preprocessors here. ( Sadly I cannot vote down yet ) – Lajos Mészáros Jun 19 '13 at 14:33

Set CSS Border Color to text color

3 Answers3

Linked