3px border automatically added when using border-style without specifying border size

Question

I noticed that setting a border-style without specifying border size results in a border being added to your element.

HTML:

<div class="box">
</div>

CSS:

.box
{
    width: 200px;
    height: 300px;
    background-color: green;
    border-style: solid;
}

Expected result: There is no border around the box, because we have not specified the width of the border.

Actual result: A black 3px border appears around the box.

Fiddle: http://jsfiddle.net/Lr7mt/

I guess my question is, why does this happen? Is it part of the W3C CSS specs?

Answer 1

It's important to understand where the properties come from:

Regarding the color property, if unspecified this comes from the border-color property, which if not set takes the dominant value from each border-*side*-color, which if not set, reverts to the value for currentColor, which is dictated by the value set for color which defaults to black.

Color

border -> no color set -> get from border-color -> no color set -> get from dominant border-*side*-color-> no sides set, revert to currentColor

The setting for width takes a similar route- but stops at the individual side width settings, which default to medium

Width

border -> no width set -> get from border-width -> no width set -> get from dominant border-*side*-width (defaults to medium)

---

In summary, the default values are black and medium.