CSS default border color

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>

---

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

---

* { border-color: green; }

从性能角度不鼓励使用通配符选择器

---

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

链接地址: http://www.djcxy.com/p/2522.html

上一篇: 关于html rgb颜色

下一篇: CSS默认边框颜色