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

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?

+4
source share
3 answers

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.

+1

, - :

border: solid medium black;

:

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

+1

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 thinmediumthickand that the values ​​are constant in one document.

More details here .

0
source

Source: https://habr.com/ru/post/1537494/


All Articles