Get my e-book focusing on CSS3 and
modern web UI development.
dig into web UI development
Last modified: 14. 3. 2016
Rendering rounded and elliptical corners:
border-radius: _top_left_radius_ _top_right_radius_ _bottom_right_radius_ _bottom_left_radius_ (/ _elliptical_variations_);
Evenly rounded corners with a 10 pixel radius can be pulled off like this:
We can also round corners using a percentage of the width of the element or using other units that are available in CSS. However, you can round each corner separately. You always start from the top left corner and proceed clockwise:
border-radius: 15% 15% 0 0;
If you add a forward slash, the element will have an elliptical shape, not a circular shape. The first corner will be rounded in an ellipse with a vertical radius of 15% and horizontal radius of 30%:
border-radius: 15% 15% 0 0 / 30% 15% 0 0;
The following scheme shows how the ellipse-rounding works in practice:
It is good to know that
border-radius is in fact a shorthand property for
border-radius properties individually:
border-top-left-radius: 4em; border-top-right-radius: 4em; border-bottom-right-radius: 4em; border-bottom-left-radius: 4em;
See a live border-radius example at cdpn.io/e/EljFa.
How to create rounded avatars using
How to handle tables with rounded corners? When dealing with tables that
border-collapse: collapse property or a parent element with an image
in it, it is necessary to apply
overflow: hidden. See more at
There are absolutely no problems in modern browsers. If you need rounded corners in IE8, just use css3pie.com but watch out - it is going to slow your website down.
Therefore, I strongly recommend a zero fallback strategy. As a result, users with older browsers simply will not see rounded corners. And what the eye doesn’t see, the heart doesn’t grieve over.
If the background color bleeds outside of a rounded corner in some browsers,
background-clip: padding-box. See
border-radius. However, it is not possible to combine it with
filter property that is widely used for color transitions. This can be
solved by setting a
hidden value for both the
properties of a parent element.