CSS for Mobile Browsers : Common Patterns (part 2) - Rounded corners

2. Rounded corners

Designers seem to love rounded corners (shown in Figure 1), and for years this was the nightmare of every web developer who needed to lay out a box with this feature. Table-based layouts for rounded corners are inappropriate for the mobile web, so we can only rely on CSS solutions. If a device doesn’t render the style (see Table 2 for a compatibility list), forget about rounded corners for that device.

WebKit has an extension for rounded corners (-webkit-border-radius); Mozilla also has one (-moz-border-radius), but with very low compatibility in mobile devices.

Note:

Another solution is the use of canvas for drawing a rounded rectangle.

The -webkit-border-radius attribute can be defined as one value (like 5px or 10%), two values (top-bottom and left-right), or four values giving the radius of each corner separately. These are samples of different styles:

.rounded {
   -webkit-border-radius: 10px;
}
.rounded2 {
   -webkit-border-radius: 10px 20px;
}
.rounded3 {
   -webkit-border-radius: 3em 2em 3em 2em;
}