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

Question

I noticed that setting the border style without specifying the size of the border adds a border 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 frame around the frame because we did not specify the width of the border.

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

Violin: http://jsfiddle.net/Lr7mt/

I think my question is why is this happening? Is it part of the W3C CSS specs?

Answer 1

It is important to understand where the properties came from:

, , border-color, , , border-*side*-color, , , currentColor, , color, .

border → → border-color → → border-*side*-color → , currentColor

, , medium

border → no width set → get from border-width → no width set → get from dominant border-*side*-width ( medium)

---

, : black medium.

Answer 2

, - :

border: solid medium black;

:

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

Answer 3

Yes, there is a default border style, BUT the specification does not exactly determine the thickness of each of the keywords ( thin, mediumand thick), which is therefore implementation-specific .

However, he asks that the thickness corresponds to the inequality thin≤ medium≤ thickand that the values ​​are constant in one document.

More details here .