Jump to content

How to set a rounded border around an image using CSS

+ 1
  adfm's Photo
Posted Jan 19 2010 03:15 PM

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;

}

Figure 4.2. Rounded borders on the right side

Attached Image

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.

Note

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

CSS Cookbook

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.

See what you'll learn


Tags:
0 Subscribe


1 Reply

0
  Andrew Symonds's Photo
Posted Mar 05 2014 02:17 AM

Here is some awesome demos of Rounded Corners using CSS3
http://www.tutorials...rder_Radius.php