Rounded Corners on Images using CSS

Many of our clients want a photo to accompany almost every article on their site. Sometimes its necessary to offer some “styling” solutions to these photos, usually in the form of a CSS-driven frame around the photo.

One client wanted a photo styling treatment that mirrored the overall styling of their website: rounded corners on everything from header bars to buttons. We needed a simple way to add rounded corners to any photo on their site.

I was thrilled to find a simple solution that fit any size photo you could throw at it and works in IE!

Laura Schoppa, Senior Designer
Posted

Many of our clients want a photo to accompany almost every article on their site. Sometimes its necessary to offer some “styling” solutions to these photos, usually in the form of a CSS-driven frame around the photo.

One client wanted a photo styling treatment that mirrored the overall styling of their website: rounded corners on everything from header bars to buttons. We needed a simple way to add rounded corners to any photo on their site.

I was thrilled to find a simple solution that fit any size photo you could throw at it and works in IE! Also, even tho the original author claims you need javascript, this doesn’t seem to be the case.

Check it out here:
http://www.sitepoint.com/examples/rounded_images/css-only.php

Laura Schoppa

Senior Designer