Menu
I'd like to set a global default size and color for all my borders using css. I'm having an issue where my css for setting a default border width and color is being overwritten the moment I try and use it. Basically I have something like this:
My.css
* {
border-width: 1px;
border-color: #222;
}
#streak {
border-bottom: solid;
}
My.html
<html>
<div id="streak">
WOOOOOOOO!
</div>
</html>
The problem is that the moment I set the bottom border to solid, it defaults the width to 3px and the color to black. In the developer console it shows that the css for * {...} was applied, but then it was crossed out and now it is currently at a width and color of initial, which it got from the "border-bottom: solid;" rule.
I've found that if I use !important in the * {...} css rules, it'll work, but I'm really not a fan of using !important if I don't have to.
Is there a better way?
658
What you're doing with the * rule is fine. What you're trying to do on individual elements is set the border style. You will need to use the border-style component property for that, rather than the border shorthand as the shorthand will override the width and color with their initial values (which are medium and currentColor respectively):
#streak {
border-bottom-style: solid;
}
Of course, this means you can continue using the shorthand in situations where you do want to override the global width and color with other values.
197
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
