Is there any way to give an image round borders using CSS?

Question

I have an image which is square 100px by 100px.

Was wondering if there was any way for giving an image rounded borders using CSS?

Similar to the border-radius property:

-moz-border-radius: 15px; border-radius: 15px;

I would prefer not to resort to Javascript.

Thanks.

This should work fine in modern browsers (no IE, basically). Try it within an img { ... } block. — Kevin
– Kevin, Commented Jun 26, 2011 at 23:47
I don't like to call IE a browser :P . Yeah it would be nice to style the img without using a background image in the div. — Ryan
– Ryan, Commented Jun 26, 2011 at 23:50

Babiker · Accepted Answer · 2011-06-26 23:50:18Z

1

-moz-border-radius: 15px; and -webkit-border-radius:15px; should work fine in a standards compliant browser. Another technique:

<div style="border: 0px solid; border-radius: 30px; -moz-border-radius: 30px; -khtm border-radius: 30px; -webkit-border-radius: 30px; width: 100px; height: 100px; background: url('img.jpg');">

edited Jun 26, 2011 at 23:50

answered Jun 26, 2011 at 23:44

Babiker

18.9k28 gold badges83 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ryan Over a year ago

Oh so I can apply the styles straight to the image class? Cool will give it a try.

Šime Vidas Over a year ago

@Ryan Applying border-radius on image elements doesn't seem to work in Opera - see here

Ryan Over a year ago

@Šime Vidas Oh ok that's interesting. I still think the applying the border-radius property to the image element will be the nicest way. I think hardly anyone uses Opera to view our current website.

Collectives™ on Stack Overflow

Is there any way to give an image round borders using CSS?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related