Not able to understand how css border works

https://codepen.io/sndlynk/pen/WNXgQJq.
In the above code, I am not able to understand if no width and height is given for an element and border is set then how space is defined for border.
As in above code border-width: 0px 200px 200px 200px; why blue color space width is more as compare to black color space and green color space . As we have clearly defined all to be same width.

Try using the shorthand css property of border

sorry … but my question is different then your provided answer.

It isn’t - the “width” for borders is NOT the same as the “witdh” of an element.
When I want a 2px border on the bottom, I want it to be 2px wide from top-to-bottom. When I want 2px border on the left, it is 2px wide from left to right.
And that’s exactly what’s happening - the blue border “width top to bottom” is 200px, just as black and green are “200px wide left to right”.

Ofcourse for general elements, “width” refers to left-to-right and “height” to top-to-bottom. But that’s for areas. Borders are considered “lines” with a linewidth.

If you go and add in the red border with 200px, you can even see that in fact all borders cover the area of the blue triangle - but because red is 0px, it’s only the bottom half of the resulting square → and the resulting square has width and height of 400px each.

2 Likes

Thank you… for your detailed explaination … I