Pure CSS Rounded Corners in IE6-8 (JQuery Accepted)

Question

There are a lot of JQuery plugins to give rounded corners to browsers that dont support CSS3. They either don't work or have an ugly effect where you see it unstyled, and then the JS kicks in and finally makes them rounded.

I am looking for a solution that renders rounded corners before visibility, looking for a seamless, or near seamless solution.

The best match I have come to so far if the use of .htc files with www.css3pie.com. There is still that delay (Not sure if it can even be solved).

css3pie is around 26k compressed, the owner stated that if you have JQuery there could be scripts that would be less. (I plan on using JQuery throughout anyways).

Ideally, I'd like it to support gradients, border-radius, and box-shadow. Currently css3pie does all of this how I need, except for box-shadowing. It messes up if the background is transparent as indicated here: http://github.com/lojjic/PIE/issues#issue/12

I am willing to accept inability of any of these features in IE6.

I guess maybe I just can't have one's cake and eat it too. For now, I will be sticking with css3pie.com and putting up with annoying delay, and not allowing for box-shadow in IE. Not a huge deal because IE9 is suppose to fix that -crossing fingers-

Answer 1

Use jquery rounded corner plugin

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

And trigger the plugin in every possible events to ensure its loaded

<script>
   $(this).corner(); //This will trigger the function as soon as this line loads
   $(document).ready(function() { $(this).corner(); }); //not necessary
   $(window).load(function() { $(this).corner(); });//not necessary
</script>

Answer 2

IMO you shouldn't care about such unimportant things like rounded corners or shadows under IE. The times when the page was supposed to look the same under every possible browser finally gone. You, as a developer, are responsible for correct display of page skeleton, but eye-candy is a browse job. If some browsers doesn't support some CSS3 elements - then it's a problem of its users. They use crappy browser - they see crappy site (well... maybe not crappy but a bit uglier).

Thus I, as a Opera user, won't see a pretty gradients on buttons on YouTube while Firefox users will. But I still see a nice-looking page!

In other words: don't care about such a details under IE. Don't care about such a details under Opera/Firefox/Safari/Chrome. If some of them doesn't support something - leave this if cross-browser solution requires more than a double/triple CSS entry:

box-shadow: 0 0 5px #333;
-moz-box-shadow: 0 0 5px #333;
-webkit-box-shadow: 0 0 5px #333;

Answer 3

I think you may find this closely-related question interesting:

http://stackoverflow.com/questions/7089/what-is-the-best-way-to-create-rounded-corners-using-css

Also closely related, but inviting more JQuery-related responses is:

http://stackoverflow.com/questions/521432/best-jquery-rounded-corners-script

Answer 4

The CSS3 PIE library handles a lot of things for IE6/7/8 including:

• Border Radius (rounded corner)
• Box Shadow
• Border Image
• Gradient Backgrounds

Its pretty handy.

Answer 5

If you must support rounded corners for IE6, than maybe you could have a look at Curved Corner.

I would call the behavior:url(border-radius.htc) via a conditional IE6 CSS file.

Personally, I would just ignore curved corners in IE6 altogether.

Answer 6

if you are looking for very smooth round corner and valid in all browser then there is simple javascript called curvycorners

just need to include js file in

in in your html use class=rounded any where you want.

http://www.curvycorners.net/instructions/