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)?

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.