Menu
While exploring the awesome markup of Medium, found an interesting way to make beautiful pill-styled buttons by using border-radius:999em. However this raised a question: why border-radius:50% makes an oval instead of a pill?
Here is a live example: http://codepen.io/evergreenv/pen/ykpBA/
625
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.
The only difference between them is the right button has a radius of 5px applied. As with borders, radius allows you to set different properties for each side of the element using the toggle controls.
Percentages: Refer to corresponding dimension of the border box. So border-radius:50%; defines the raddi of the ellipse this way : the radii on the X axis is 50% of the containers width. the radii on the Y axis is 50% of the containers height.
There is no technical reason not to use the rem unit for border-radius . Neither is never any compelling reason to use the rem unit, for it or otherwise.
The border radius property does all it can to mantain same ratio between the overall radius, when you use border-radius: 999em, it keeps the same proportions of the smallest corner.
But when you use border-radius: 50%, it makes the border set to the proportions of the entire object, assuming x-axis for 50% of the width and y-axis for the 50% of the height of the object, all corners combined make it appear as if the object is circular.
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
