CSS default border color

Question

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?

Accepted Answer

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

CSS default border color

Solution

Problem

Related problems