rounded corners on images

how to apply rounded corners on images

[4ndr3]

Hi,

I would like to have all the photos I use on my site to have rounded corners.

I'm too lazy to apply round corners on the images in photoshop every time I want to post a new one. So therefore, I'm wondering if there is some way to achieve this with css/xhtml. The images will be of various sizes and proportions so I can not use a div with a fixed size. Also, I do not want to use png images due inconsistencies in browsers.

So if anyone could assist in solving this I would be very very grateful. Any assistance is welcome, wheter it be links/directions to where I can find more info about solving the problem, to fully working code samples.

I will be using XHTML 1.0 strict on this page and would like the solution to validate as such.

[dreamcatcher]

Welcome to WebmasterWorld 4ndr3 :)

You can try googling for Roundpic, which is what I use from time to time. Not sure about CSS. I know you can create round divs using CSS, so its going to be tricky.

dc

[edited by: SuzyUK at 8:41 am (utc) on May 25, 2008]

[swa66]

If you're the patient type CSS3 has rounded corners, but it'll take forever before you get rid of the IE6 and IE7 users (and that's hoping that IE8 will do CSS3 if and when it's released.)

But then it's as easy as setting the radius:

[w3.org...]

To get it today in FF and Safari use:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Theres also variants to do it on just selected corners.

[kaled]

Take a look at this example - it's pretty impressive.
<> -- search for [curvycorners]

The javascript is huge but you may find it useful.

Kaled.

[edited by: SuzyUK at 8:46 am (utc) on May 25, 2008]
[edit reason] Sorry no URI's per charter [/edit]

[Key_Master]

My personal favorite is a nifty javascript/css solution:
<>
--search for [corner.js]

[edited by: SuzyUK at 8:46 am (utc) on May 25, 2008]
[edit reason] URL removed per charter [/edit]