CSS default border color

Question

Let we have the following html markup:

<div id="parent" class="parent">
    <div id="child" class="child">
    </div>
</div>

and corresponding css styles:

.parent{
    border-style: solid;
    border-color: green;
    border-bottom: solid 10px;
    background:grey;
    width: 300px;
    height: 300px;
    padding: 10px;
}
.child{
    border: 20px solid;
    background: aqua;
    height: 50px;
    margin: 10px;
}

.parent {
  border-style: solid;
  border-color: green;
  border-bottom: solid 10px;
  background: grey;
  width: 300px;
  height: 300px;
  padding: 10px;
}
.child {
  border: 20px solid;
  background: aqua;
  height: 50px;
  margin: 10px;
}

<div id="parent" class="parent">
  <div id="child" class="child">
  </div>
</div>

We can see that child's border color is black, but i dont define this color explicitly.

How I can change this default color to green?

@Pranavc — No, that doesn't work: http://jsfiddle.net/G3PQm/ — Quentin, Dec 22 '13 at 15:26
As per logic it might be wise to match certain object-types when the page is done loading. For example with JavaScript/jQuery target anything that is display `block` and give it borders. Matching anything will not give the correct result. It will literally give anything borders, which will hardly ever work. — , Dec 22 '13 at 15:27

score 4 · Accepted Answer · answered Dec 22 '13 at 15:24

You can't change the default. The default is whatever the browser defines it as.

If you want to inherit the value from the parent (as your mentioning the parent in the question implies), then you must explicitly inherit it.

.child {
    border-color: inherit;
}

You must also not use the shorthand border property with the color value omited, since that will reset the property to the default.

.child {
    border-color: inherit;
    border-width: 20px;
    border-style: solid;
}

You can also simply be explicit:

.child {
    border-color: green;
    border-width: 20px;
    border-style: solid;
}

score 3 · Answer 2 · edited May 23 '17 at 12:19

Most of the currently accepted answer is inaccurate:

You can change the default border color: not by CSS, but in the user's graphic environment (system settings, usually available as desktop settings in OS).

You can omit the color value in border shorthand property. In CSS3 the border-color is then set to currentColor, which can also be specified explicitly.

border: 1px solid currentColor; /* CSS3 */

The currentColor is usually black by default system settings. In CSS2, you can also use other system values, see in the link above. These are deprecated, but still working in my Opera.

border: 1px solid ThreeDDarkShadow; /* CSS2 deprecated */

Now the color is gray in my environment. The CSS2 values are (quoting the link above):

ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText.

Note: currentColor is different from inherit (which will solve your problem as Quentin suggests) and there is no value keyword like default, auto or initial in border-color property. One might think that if you specify invalid or browser-unsupported color, the browser has to pick some color and if there is no way to infer that color, it logically picks the system color anyway since browsers don't stop output on syntax error. However, some browsers implement a mystical numerologic algorithm to infer colors from unknown strings. It doesn't apply in my Opera.

Check your system colors in the snippet

  div { float: left; margin: 5px; width: 125px; padding: 20px; border: 1px solid black; color: #800; text-shadow: 0 1px black;}
  .ActiveBorder { background-color: ActiveBorder; }
  .ActiveCaption { background-color: ActiveCaption; }
  .AppWorkspace { background-color: AppWorkspace; }
  .Background { background-color: Background; }
  .ButtonFace { background-color: ButtonFace; }
  .ButtonHighlight { background-color: ButtonHighlight; }
  .ButtonShadow { background-color: ButtonShadow; }
  .ButtonText { background-color: ButtonText; }
  .CaptionText { background-color: CaptionText; }
  .GrayText { background-color: GrayText; }
  .Highlight { background-color: Highlight; }
  .HighlightText { background-color: HighlightText; }
  .InactiveBorder { background-color: InactiveBorder; }
  .InactiveCaption { background-color: InactiveCaption; }
  .InactiveCaptionText { background-color: InactiveCaptionText; }
  .InfoBackground { background-color: InfoBackground; }
  .InfoText { background-color: InfoText; }
  .Menu { background-color: Menu; }
  .MenuText { background-color: MenuText; }
  .Scrollbar { background-color: Scrollbar; }
  .ThreeDDarkShadow { background-color: ThreeDDarkShadow; }
  .ThreeDFace { background-color: ThreeDFace; }
  .ThreeDHighlight { background-color: ThreeDHighlight; }
  .ThreeDLightShadow { background-color: ThreeDLightShadow; }
  .ThreeDShadow { background-color: ThreeDShadow; }
  .Window { background-color: Window; }
  .WindowFrame { background-color: WindowFrame; }
  .WindowText { background-color: WindowText; }

<div class="ActiveBorder">ActiveBorder</div>
<div class="ActiveCaption">ActiveCaption</div>
<div class="AppWorkspace">AppWorkspace</div>
<div class="Background">Background</div>
<div class="ButtonFace">ButtonFace</div>
<div class="ButtonHighlight">ButtonHighlight</div>
<div class="ButtonShadow">ButtonShadow</div>
<div class="ButtonText">ButtonText</div>
<div class="CaptionText">CaptionText</div>
<div class="GrayText">GrayText</div>
<div class="Highlight">Highlight</div>
<div class="HighlightText">HighlightText</div>
<div class="InactiveBorder">InactiveBorder</div>
<div class="InactiveCaption">InactiveCaption</div>
<div class="InactiveCaptionText">InactiveCaptionText</div>
<div class="InfoBackground">InfoBackground</div>
<div class="InfoText">InfoText</div>
<div class="Menu">Menu</div>
<div class="MenuText">MenuText</div>
<div class="Scrollbar">Scrollbar</div>
<div class="ThreeDDarkShadow">ThreeDDarkShadow</div>
<div class="ThreeDFace">ThreeDFace</div>
<div class="ThreeDHighlight">ThreeDHighlight</div>
<div class="ThreeDLightShadow">ThreeDLightShadow</div>
<div class="ThreeDShadow">ThreeDShadow</div>
<div class="ThreeDShadow">ThreeDShadow</div>
<div class="Window">Window</div>
<div class="WindowFrame">WindowFrame</div>
<div class="WindowText">WindowText</div>

score 1 · Answer 3 · answered Dec 22 '13 at 15:22

1

* { border-color: green; }

keep in mind using wildcard selectors is not encouraged from a performance perspective

answered Dec 22 '13 at 15:22

Max

1,468
10
16

That won't work. `border: 20px solid;` will reset the border-color: http://jsfiddle.net/G3PQm/ – Quentin Dec 22 '13 at 15:24
Then use * { border-color: green !important; } which is not encouraged from a style perspective – Max Dec 22 '13 at 15:25

score 1 · Answer 4 · answered Dec 22 '13 at 15:23

1

Add border-color: green; in the .child class. See updated fiddle

answered Dec 22 '13 at 15:23

Michel

26,600
6
64
69

score 1 · Answer 5 · answered Dec 22 '13 at 15:24

1

You change change as below to make the border color green

.child {
border : 20px solid green;
}

answered Dec 22 '13 at 15:24

Selva

338
2
12

score 1 · Answer 6 · answered Dec 22 '13 at 15:24

1

If it's only divs with the child class, you can use this in your stylesheet.

.child { border-color:#00ff00!important; }

answered Dec 22 '13 at 15:24

ohiodoug

1,493
1
9
12

score 1 · Answer 7 · answered Dec 22 '13 at 15:26

1

That is browser behavior, you cannot change that behavior until there is any theme you apply, what you can do is to override color by using:

border-color: green;

Here is fiddle

answered Dec 22 '13 at 15:26

Zaheer Ahmed

28,160
11
74
110

score 1 · Answer 8 · answered Jan 10 '18 at 10:34

1

Use color:green. When border-color is not specified, browser uses text color of an element as its border-color

answered Jan 10 '18 at 10:34

Stepan Shatkovski

565
4
8

CSS default border color

8 Answers8