Setting a Rounded Border Around an Image using CSS

Rounded Border Around an Image is better than a normal image .Using Css3 we can handle the image border and can  add some extra visual effect on it.In this tutorial ,I am going to show u these things .

Set the border value and then use the CSS3 border-radius property along with its browser-specific border-radius properties.

div{
background-image: url(Smoker.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.

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(smoker.jpg);
width: 375px;
height: 500px;
border: 8px solid #666;
/* top-left corner */
border-top-left-radius: 40px;
-webkit-border-top-left-radius: 40px;
/* bottom-right corner */
border-bottom-right-radius: 40px;
-webkit-border-bottom-right-radius: 40px;
/* bottom-left corner */

border-bottom-left-radius: 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.

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

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