Rounded Corners On Divs Without Using Images

I tried to use jquery.corner.js and it works well in FF but on IE, it adds several breaks and makes the div look 'longer'. I found several ways of rounding corners using images, bu

Solution 1:

No.

But have a look at CSS Rounded Corners In All Browsers (With No Images).

Solution 2:

or you can do what everyone will eventually do, stop baby-sitting ie. you want to have rounded corner, set this as standard css rules. user browsing with ie wont benefit from it, unless this is a strong requirements it will simplify your job greatly and maybe help people to switch (or at least update) their browser.

Solution 3:

Have a look at the border radius CSS3 properties

IE does not support this, so also have a look at SpiffyCorners ( just css )

Keep in mind that not using images (for browsers that do not support the CSS 3 border-radius) means that you will be unable to achieve transparency at the area outside the rounded corner ..

Solution 4:

http://www.curvycorners.net/

It's a javascript library which manually constructs the pixels of your corners out of divs.

Solution 5:

I've looked at several corner-rounding scripts and I have yet to find one that actually works in all of the situations we need it to work in. They don't always play nice once you start manipulating the DOM with your own scripts.

I ultimately went back to images. We round corners via CSS for all compliant browsers, then, if IE, we wrap the elements we want rounded in a div and then absolutely position 4 corner images.