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?
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With