when we write border-radius: 25%; it means 25% of what?
8 Replies
ἔρως2mo ago
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
Chris Bolson2mo ago
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.
Rägnar O'ock2mo ago
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
Want results from more Discord servers?