Menu
In general, is it more efficient to use percentages or pixel/em values for border-radii?
For an example: for a square image 200px by 200px, which out of border-radius:50% or border-radius:100px is best? Obviously percentages for circles are easier to manage, but are percentages significantly harder to calculate? Are there any caveats?
This question is assuming the use of a compatible browser, and static-sized images.
835
3–4px Radius: This is best and probably the most safe choice. 3–4px is in every point of standard across multi fields, expressing a little bit more friendly and accommodating then 0px.
It is generally safest to use the same unit for different dimensions, and this applies to border-radius , too, when the height and width of the element have been set in rem units. The reason is that this ensures that the shape is preserved if the font size of the root element is changed.
To create a circle we can set the border-radius on the element. This will create curved corners on the element. If we set it to 50% it will create a circle.
I prefer to user percentage values because if I change size of my image, I don't need change my border-radius. But in MDN site you can read this bugs about percentage value:
percentage values
Check this link for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#_values
118
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
