CSS default border color

CSS default border color

Let we have the following html markup:

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;  }

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?

Answer by Max for CSS default border color

* { border-color: green; }  

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

Answer by Michael P. Bazos for CSS default border color

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

Answer by Selva for CSS default border color

You change change as below to make the border color green

.child {  border : 20px solid green;  }  

Answer by Quentin for CSS default border color

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;  }  

Answer by ohiodoug for CSS default border color

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

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

Answer by Zaheer Ahmed for CSS default border color

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

Answer by Jan Turo for CSS default border color

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 ButtonFace; /* CSS2 deprecated */  

Now the color is light 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, browsers implement a mystical numerologic algorithm to infer colors from unknown strings. It doesn't apply in my Opera.

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72