Menu
CSS3 uses the border-radius attribute to set rounded corners in elements. The values, normally, are set in px, and the lowest value allowed is 0px. The visual result are variable, according to the dimensions of the element with this attribute. For example, an element with dimensions 100px X 100px with border-radius: 20px;, will not get totally rounded(circle), otherwise, an element with dimensions 10px X 10px will be. There are no limit to the maximum value allowed.
The question is: how to calculate the maximum value, according to the element size, to make it 100% rounded?
Fiddle page
EDIT : How to calculate the value in pixels (px)?
873
The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as innerRadius + distance = outerRadius or more tersely R1 + D = R2 .
Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.
Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
Where general rule for achieving the circle by using border radius set to 50% , is that you need to make sure that content of such element has the same width and height. You can get that by fixing these values in your css .
Why not use a percent?
border-radius: 50%;
Just make sure whatever you're applying it to is square.
127
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
