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
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.