CODEWITHSUNDEEP
htmlcssrounded-corners
Brian
Brian

Reputation: 963

Rounded image corners in IE and Firefox

I cannot make the image a background image to a div and round the div's corners because the image is resized, and as far as I know, you cannot resize a background image.

What are my options, if any? Open to all suggestions including wrapper divs and corner images.

Also, if it cannot be done in IE but there's a solution for Firefox, that's just fine with me.

Upvotes: 2

Views: 729

Answers (4)

Sniffer
Sniffer

Reputation: 6412

If you're interested in creating corners in IE then this may be of use - http://css3pie.com/

Upvotes: 1

Pedro Rolo
Pedro Rolo

Reputation: 29980

I am not sure, but maybe you can achieve what you want by using svg backgrounds. This will not work in IE.

Upvotes: 0

gub
gub

Reputation: 5239

The jQuery corner plugin is what I use. You can do:

$('#div').corner('10px');

Upvotes: 0

Andy E
Andy E

Reputation: 344713

If you're re-using the image and it's varying in size, you should be chopping up your corners accordingly if possible. I had a quick look for you, and here's a site that shows you how to achieve it using sprites. This increases your markup because you need to use positioned divs to position each section of the box.

Of course, recent versions of Firefox, Safari, Opera and Chrome support border-radius which allows you to create rounded corners without using images. IE9 will support this too, when it gets released.
I've seen sites that use border-radius and just leave it at that, so the borders aren't rounded in browsers that don't support it.

Upvotes: 1

Related Questions