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)?
You can use the border-image property to create a gradient border with 4 colors.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With