Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Setting a Rounded Border Around an Image

Problem

You want to round the right-angle corners of an image border.

Solution

Set the border value and then use the CSS3 border-radius property along with its browser-specific border-radius properties, as shown in the right side of Figure 4-2:

div{
 background-image: url(beach.jpg);
 width: 375px;
 height: 500px;
 border: 8px solid #666;
 border-radius: 40px;
 -moz-border-radius: 40px;
 -webkit-border-radius: 40px;
}
Rounded borders on the right side

Figure 4-2. Rounded borders on the right side

Discussion

The radius is half the distance of a circle’s diameter and is used to set the amount of curvature on the corner. The higher the value for the radius, the more rounded the corner will be.

At the time of this writing, the border-radius property isn’t supported as is; however, the proprietary properties in both Firefox and Safari replicate the effect. The main drawback (other than cross-browser support) is that the names of the border properties are not consistent, as shown in Table 4-1.

Table 4-1. Rounded corner property equivalents

CSS3

Firefox

WebKit

border-radius

-moz-border- radius

-webkit-border- radius

border- top-left-radius

-moz-border- radius-topleft

-webkit-border- top-left-radius

border- top-right-radius

-moz-border- radius-topright

-webkit-border- top-right-radius

border- bottom-right-radius

-moz-border- radius-bottomright

-webkit-border- bottom-right-radius

border- bottom-left-radius

-moz-border- radius-bottomleft

-webkit-border- bottom-left-radius

Specifying corners

Rounded corners are also rendered on individual corners, not just all four corners. To set the rounded effect on only one or a few corners, specify each rounded corner individually in the CSS rule.

For example, the following CSS rule defines that all corners be rounded except for the top-right corner:

div#roundbkgd {
 background-image: url(beach.jpg);
 width: 375px;
 height: 500px;
 border: 8px solid #666;

 /* top-left corner */
 border-top-left-radius: 40px;
 -moz-border-radius-topleft: 40px;
 -webkit-border-top-left-radius: 40px;

 /* bottom-right corner */
 border-bottom-right-radius: 40px;
 -moz-border-radius-bottomright: 40px;
 -webkit-border-bottom-right-radius: 40px;

 /* bottom-left corner */
 border-bottom-left-radius: 40px;
 -moz-border-radius-bottomleft: 40px;
 -webkit-border-bottom-left-radius: 40px;
}

Known issues

If the image is inline, or placed within the HTML and not as a background image, the rounded borders are shown behind the image instead of clipping the image, as shown on the left side of Figure 4-2:

img {
 width: 375px;
 height: 500px;
 border: 8px solid #666;
 background: #fff;
 display:block;
 border-radius: 40px;
 -moz-border-radius: 40px;
 -webkit-border-radius: 40px;
}

To work around this problem, keep the value of the border-radius property relatively small (no more than four or five pixels) or set the image within the background of an element (see Setting a Background Image).

Note

Opera is scheduled to support border-radius for the next major release after Opera 10.

See Also

The CSS3 specification for border-radius at http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required