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
Figure 1. The rounded corners feature allows us to round any defined
border or background color on compatible devices.
Table 2. Rounded corners compatibility table
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.
Another solution is the use of canvas for drawing a rounded rectangle.
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:
-webkit-border-radius: 10px 20px;
-webkit-border-radius: 3em 2em 3em 2em;