CODEWITHSUNDEEP
csshtmlrounded-corners
Jules
Jules

Reputation: 14510

Is there a way to clip an image using a <div> so that it has rounded corners?

I figure that using a div with CSS rounded corners to clip an image will make a page load faster than using an image clipped in Photoshop, then exported with transparency as PNG-32.

Upvotes: 3

Views: 243

Answers (2)

faino
faino

Reputation: 3224

Make sure you make it cross-browser compatible:

img {
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

The shorthand for the border-radius property is:

border-radius: top-left top-right bottom-right bottom-left;

So a value of 10px 30px 10px 30px would round the top-right and bottom-left corners a lot more then the other two:

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:30px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:30px;
-webkit-border-radius:10px 30px 10px 30px;
border-radius:10px 30px 10px 30px;

Upvotes: 3

Alex
Alex

Reputation: 35399

Use the CSS3 border-radius property:

img { border-radius:5px; /* specify an appropriate pixel value */ }

Upvotes: 2

Related Questions