Clever Geek Handbook

How do I calculate the maximum value of the border radius without using a percentage?

CSS3 uses an attribute border-radius

to set rounded corners on elements. Values ​​are usually in px, and the minimum acceptable value is 0px. The visual result is variable, according to the dimensions of the element with this attribute. For example, an element with dimensions 100px X 100px border-radius: 20px;

will not be completely rounded (circle), otherwise it will be an element with dimensions 10px X 10px. The maximum allowable value is not limited.

Question: how to calculate the maximum value , according to the element size, to make it 100% rounded?

Script page

EDIT: How do I calculate the value in pixels (px)?

+3


source to share


2 answers


Why not use a percentage?

border-radius: 50%;


Just make sure everything you apply it to is square.

+3


source


The right path must be

border-radius: 50%;

The spec states that you can use a percentage here, and it should come from the corresponding dimensions of the border-box

item.



The image from the spec shows why 50%

is the correct value if you want a circle:

enter image description here

If your element is not square (height! = Width), you can still use it to get a nice ellipse.

+8


source






More articles:


All Articles