CODEWITHSUNDEEP
htmlcssborder
Seph Reed
Seph Reed

Reputation: 10998

Is there a way to set a default border color/size in CSS?

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?

Upvotes: 3

Views: 1865

Answers (2)

BoltClock
BoltClock

Reputation: 724132

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.

Upvotes: 4

Ayyammal Pandian
Ayyammal Pandian

Reputation: 3

your css file and class everything correct.you missed the line "border:solid" this for border style.without giving type it won't work.now you can try with this.

* { 
  border-width: 1px;
  border-color: #222;
  border:solid
}
<html>
<head>
 <link rel="stylesheet" type="text/css"  href="example.css"  />
</head>
<div>
  WOOOOOOOO!
</div>
<span> hiiiiiiiiiiiiiiiii </span>
</html>

Upvotes: -1

Related Questions