Rounded corners on a div without using images

Question

I tried using jquery.corner.js and it works fine in FF, but in IE it adds a few breaks and makes the div longer. I found several ways to round corners using images, but it actually gets tedious to try to create images for each corner.

There are several approaches that work only on FF, Opera (and other Mozilla-based browsers), but not on IE.

Is there a way to round corners in a div / text box that works in all browsers without using images?

Answer 1

Not.

But look at CSS rounded corners in all browsers (no images) .

Answer 2

or you can do what everyone ultimately does, stop the nanny, i.e. you want to have a rounded corner, set this as standard css rules. viewing users, i.e. it will not bring them any benefit, if this is not a strong requirement, it will greatly simplify your work and perhaps help people switch (or at least refresh) their browser.

Answer 3

Look at CSS3 border radius properties

IE does not support this, so also see SpiffyCorners (just css)

Keep in mind that not using images (for browsers that do not support CSS 3 border borders) means that you cannot achieve transparency in the area outside the rounded corner.

Answer 4

http://www.curvycorners.net/

This is a javascript library that manually creates pixels of your corners from div s.

Answer 5

I looked at several scripts with rounding rounding, and I still have to find one that really works in all the situations that we need for it to work. They don’t always play well once you start manipulating the DOM with your own scripts.

I ended up returning to the images. We round the corners through CSS for all compatible browsers, then, if IE, we wrap the elements that we want to round in the div, and then absolutely position the 4 corner images.

Answer 6

If you're interested in creating corners in IE, this might be useful - http://css3pie.com/