Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CurveyCorners/CSS3PIE Alternatives and Glitches

CurveyCorners/CSS3PIE Alternatives and Glitches


I am attempting to have Rounded Corners (preferably using border-radius css, but I can entertain another option at this point). I've tried CSS3PIE, but it caused issues with in IE8 with jquery and there were display problems where items were displaced several pixels from their true positions. I then tried CurveyCorners, but it stopped my ability to change css on hover (using the jquery $(this).removeClass("nohover");$(this).addClass("hover"); )

Are there alternatives?

Problem courtesy of: steventnorris


I've gone through this quite a few times now and I always end up at the same place. Here's what my experience's tell me.

  • Use CSS border-radius for rounded corners in all modern browsers
  • Let older browsers degrade gracefully
  • Use LESS CSS (for the mixins):
  • Use LESS CSS mixins to easily code border-radius w/o having to personally input specific - versions of border-radius for different browsers.
  • Use less.js to compile while you develop (or use codekit).

Here's a great example of a less elements border-radius mixin:

#some_div {
  .border-radius(5px, 0, 0, 5px);

Or you can just code the different versions of border-radius by hand :)

Final though: One of the main issues with trying to force IE8 to have rounded corners with Javascript is that generally you're asking the browser to do a lot of extra work. Machines running IE8 are often institutional machines without a lot of extra horsepower to spare. This can make for an end user experience far worse than a degraded CSS page.

Solution courtesy of: Stone


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CurveyCorners/CSS3PIE Alternatives and Glitches


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription