CSS3 Border Radius

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

Rendering rounded and elliptical corners:

Syntax

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:

border-radius: 10px;

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:

border-radius: 15% 0 0 0 / 30% 0 0 0

It is good to know that border-radius is in fact a shorthand property for setting four 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.

Tips and Tricks

How to create rounded avatars using border-radius? See trentwalton.com/2010/08/03/css3-border-radius-rounded-avatars/

How to handle tables with rounded corners? When dealing with tables that have the border-collapse: collapse property or a parent element with an image in it, it is necessary to apply overflow: hidden. See more at cdpn.io/e/jpdFm

Browser Support

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, just add background-clip: padding-box. See tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

MSIE9 supports border-radius. However, it is not possible to combine it with the filter property that is widely used for color transitions. This can be solved by setting a hidden value for both the border-radius and overflow properties of a parent element.




Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more