Pure CSS Rounded Corners in IE6-8 (JQuery Accepted)
Question by BHare
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 by Erik
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 by Starx
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>
