Boundary radius: 50% compared to border radius: 999em

Question

Studying the amazing layout of Medium, I found an interesting way to make beautiful buttons in the style of tablets using the border radius: 999em. However, this posed the question: why does the border radius: 50% make an oval instead of a pill?

Here is a live example: http://codepen.io/evergreenv/pen/ykpBA/

Answer 1

The border radius property does everything possible to ensure the same ratio between the total radius, when you use it border-radius: 999em, it keeps the same proportions of the smallest angle.

border-radius: 50%, , x 50% y- 50% , , , .

, , , .

. Safari 5.1+. Opera 11.5 +.

Answer 2

div.

A 50% / div.

B (999em, ).

Answer 3

Well it does an oval using border-radius: 50%, because it counts the borders of an element from the x and y directions, which means in width and height, and you have a width of 120 pixels and a height of 60 pixels, so it calculates how this border in the x direction means 60px and on y its radius is 30px, and combining it, make an oval.

when applying css border-radius:100px it does

border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px;

to get the form of tablets.