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

Problem

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?

Problem courtesy of: khromov

Solution

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.

Solution courtesy of: SW4

Discussion

Yep, there is default border style, BUT the specification doesn't precisely define the thickness of each of the keywords (thin, medium and thick), which is therefore implementation specific.

Nevertheless, it requests that the thickness does follow the thinmediumthick inequality and that the values are constant on a single document.

Read more here.

Discussion courtesy of: bodi0

This is happening because border default width is medium :

border: solid medium black;

An example :

http://jsfiddle.net/Lr7mt/1/

Discussion courtesy of: Vangel Tzo

This recipe can be found in it's original form on Stack Over Flow.