htmlinternet-explorercsscross-browserrounded-corners

Reputation:

Round corner solution for all browsers?

I'm looking for the best solution out there for round corners on boxes, which have to work in all browsers (including IE 7-9)

I've been looking on CSS3 PIE, which seemed promising until I saw the list of "Known Issues". Relative paths and z-index problems made me look for other solutions. I noticed they have a "JS Solution" for CSS3 PIE as well, but this has some big disadvantages as well..

Are there any other good solutions out there for round corners crossbrowser-wise?

Upvotes: 3

Answers (7)

Blynn

Reputation: 1411

I believe the link below works in most browsers and that Facebook did something like this for a week to add a rounded style to their site, and then they realized it takes awhile to load up the corners for IE people.

http://jquery.malsup.com/corner/

Upvotes: 0

Ron Ferraro

Reputation: 201

As of this writing, I don't think that there are any other "good" solutions for cross-browser rounded corners. I have searched high and low and CSSPIE is the best solution I have found. The "known issues" are not nearly as bad as the alternative of having crummy looking pages in IE or resorting to images for everything.

The path issues you are experiencing probably have to do with the fact that the PIE.htc path is relative to the document you are viewing, and not the CSS file that calls it. Just be sure to check that and you should be in good shape.

z-index issues are probably related to children of a PIE border-radius parent not having a -pie-watch-ancestors value set. Alternately, you could just call the PIE behavior again separately on the children.

CSS3PIE takes a little getting used to, particularly if you are trying to get it working with .less files, or on shived html5 elements, or if you're running IE in Parallels on a Mac. There are a lot of things that can go wrong in these scenarios. I honestly believe, though, that PIE is your best bet. If at first you don't succeed, don't give up. You CAN get border-radius working in older versions of IE, along with other essential enhancements like gradients, box-shadows and the like.

Upvotes: 0

defau1t

Reputation: 10619

Since you have incuded IE7 above, so I would say there is no pure CSS solution to acheive this. Modern browsers support border-radius to achieve rounded corners and you need to specify the -moz and -webkit for mozilla and webkit based browsers.

To achieve rounded corners, I would suggest you put all your rounded cornners in one image and make an sprite of this. then use background-position to get it working across all the range of browsers out there, including our good old friend IE6.

Upvotes: 0

idrumgood

Reputation: 4924

It's not exactly the answer you're looking for (honestly, if you really want IE7-8 support, CSSPIE is pretty decent).

I've been using prefix-free on my sites as of late so I don't have to worry about vendor support. Just use what CSS3 you want and the js takes care of adding all the pre-fixes where necessary. If/when vendors all support CSS3 properties, just remove the JS file instead of combing through your css and removing all the prefixed parts.

Upvotes: 0

Oedum

Reputation: 816

The best i can suggest is

border-radius: 5px;

I know it doesn't work in all browsers, but it's a CSS3 feature, so sooner or later it will work in all browsers. here you can see it works for all major browsers http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/ and it works in IE9 too

Upvotes: 0

JAiro

Reputation: 5999

here you have a guide to create round borders for all browsers

http://jonraasch.com/blog/css-rounded-corners-in-all-browsers

Upvotes: 1

Jakub

Reputation: 20475

There is NO pure CSS solution for all browsers, you will have to create this using images, either using a Javascript solution or CSS code that includes the rounded images.

Blame IE7-9 for the non CSS3 solutions...

Upvotes: 2

Round corner solution for all browsers?

Answers (7)

Related Questions