Menu
I've got a site I'm building which has deeply nested divs, and uses user selectable themes. My question is... Why doesn't border-color propagate to child elements?
I am already dealing with the DOM stylesheets, so it will not be anything difficult to add a loop to update border colors. Yet I am curious why it is standard (Firefox & Chrome, in Linux) that border color doesn't inherit from the parent, and instead defaults to the text color, and still border-style won't default to solid?
Is there some wisdom behind this behaviour? I'm not trying to be cheaky. I am really curious why this seems to be "by design."
As I've been writing this I realize the simplest, and most flexible solution is to define my elements as class="classname border" and then update the border class to reflect the proper border color.
Still though, I don't understand the why?
Here's a simple bit of html that demonstrates the issue...
<html>
<head>
<style type="text/css">
.content{
color: red;
display: inline-block;
border-width: 2px;
border-style: solid;
border-color: yellow;
}
.nested{
color: green;
display: inline-block;
border-width: 2px;
border-style: solid;
margin: 3px;
}
</style>
</head>
<body>
<div class="content">
Content div. Red text, yellow border.<br>
<div class="nested">
Ignores parent border color. Defaults to text color.
</div>
</div>
</body>
</html>
I wouldn't ask this, except I'm fairly sure there are people here who actually commented on the rfc's, and have some background information that might shed some light on the 'why'.
Thanks.
Skip
756
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. All borders are drawn on top of the box's background.
The border-color shorthand CSS property sets the color of an element's border.
There's no default value for border color.
You need to manually tell it to take its value from its parent with border-color: inherit;
177
This is an old question and i am shocked nobody has suggested this solution. You can achieve inherited border colors easily with CSS if you take the following steps:
1) In you css file create the following rule:
*{
border-color:inherit;
}
2) For any element that you wish to use the inherited border color first apply your border with no color specified, then inherit the parent border-color.
.myThing {
border:1px solid; /* this will inherit the parent color as the border-color */
border-color:inherit; /* this will inherit the parent's inherited border-color */
}
The css rule we crated in step one will take care of all the previous elements border-color:inherit. Then in step two we need to manually override the fact that any border specified without a color will inherit the parent color NOT border-color. So border-color MUST come after the border is set!
7
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
