Border Radius cssHook with Internet Explorer support

The Border radius jQuery cssHook I created here got a little interest, so I thought I’d explaining what it was doing and how it works.

The cssHook checks to see if the browser supports border radius. If the browser doesn’t it falls back to using a border radius plugin for IE. To allow for having a set and get function we use $.data to store the border radius property value, as there is no border radius css property to set and get values with.

To use the Border Radius cssHook include the following files:

//jQuery 1.4.3+
<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/borderradiusalt.js" type="text/javascript"></script>

You do no need borderradius.js which you will see on Github as this is separate from borderradiusalt.js. I wrote this as an alternative to Burin Asavesna’s cssHook to also support Internet Explorer 6,7 and 8 as well as normalising border radius between browsers that do support it.

Then we simply use the following code to set the border radius on an element that will work in all browsers that support border radius and older versions of IE:

$(document).ready(function(){
   $("#el").css("border-radius", "10px");
});

Internally this code is doing

elem.style.MozBorderRadius = "10px"; //Firefox
elem.style.WebkitBorderRadius = "10px"; //Safari, Chrome

//and for IE
var css = ($.data( elem, "borderRadiusIECSS")) ? $.data( elem, "borderRadiusIECSS") : document.createStyleSheet("ie_style.css");

var parts = value.split(rWhiteSpace);
var one = parts[0];
var two = parts[1] || parts[0];
var three = parts[2] || parts[0];
var four = parts[3] || parts[1] || parts[0];

var values = [
	one,
	two,
	three,
	four
];

css.cssText = "";
css.addRule( "#results", "border-radius:" + values.join(" ") );

//Behavior file that creates rounder corners
elem.style.behavior = "url(js/border-radius.htc)";

//Store border radius property value
$.data(elem, "borderRadiusIE", values.join(" "));

//Store stylesheet to use later
$.data( elem, "borderRadiusIECSS", css);

There are currently the following drawbacks for using it with IE:

  • You can’t animate border radius
  • Once the border radius is set you can’t change it

Below is a number of things I’d like to get done soon:

  • Allow border radius to animate is IE 6,7 and 8
  • Allow individual corner values to have set and get cssHooks
  • Allow animation of border radius in IE
  • Add opacity support
  • Rewrite the behavior file in jQuery

You can download a fully working example, here (zip), but for more up to date code please keep checking Github.

Tom