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?
EDIT : How to calculate the value in pixels (px)?
Why not use a percent?
Just make sure whatever you’re applying it to is square.