Help
Do you want to set a rounded border around an image, but haven't found out how to do it? This excerpt from Christoper Schmitt's CSS Cookbook, Third Edition will show you how to accomplish this task with minimal effort.
If you want to round the right-angle corners of an image
border, 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;
}
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 |
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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;
}
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.
Note
Opera is scheduled to support border-radius
for the next major release after Opera 10.
Learn more about this topic from CSS Cookbook, 3rd Edition.
Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from determining which aspects of CSS meet the specific needs of your site to methods for resolving differences in the way browsers display it.
