border-radius percentage of what?
when we write
border-radius: 25%; it means 25% of what?8 Replies
of the dimensions of the element
so if we have an element with a width of 200px and a height of 100px, how do you calculate the equivalent of
border-radius:25%; expressed in px? Not 25% of the width, nor 25% of the height, nor width+height/2... I'm trying to understand why we get such a different result with the border-radius expressed in px and in %
You can place a smaller box inside and give this box a width and height of 25% and place it in one of the corners and you see where the border-radius starts and ends
Like this
So where the smaller box is, That is where you have the border-radius
Hopefully this makes sense
And here you have it with pixels
When you define a borer radius you are defining the curve point that distance along both the x and y axis. So, if you define an static value of 50 px it will be at 50px both along the x-axis and the y-axis. However, In the case of a percentage of 25%, and using your 200px X 100px element as a reference, it will go 50px along the x-axis and 25px along the y-axis.
And if you want to mimic the "not circle" aspect of percentage based border-radius you can provide 2 values for each corner. One for the width of the radius and one for the height
Thank you! It becomes clear now