Tom Butler's programming blog

CSS3 in Internet Explorer

CSS3 in IE

Please note: With IE9+ taking significant market share, this project is no longer maintained. If you are looking for a similar tool check out CSS3 PIE

This is a script based on Remiz Rahnas's border-radius.htc file for Internet explorer which allowed the use of border-radius in IE.

I have extended the script, fixed a large number of bugs, added functionality and restructured the code to make it more extensible going forward.

CSS3 Support for:

  • border-radius (with different radii for each corner)
  • box-shadow (visually a near perfect match to Webkit)
  • rgba (backgrouds only for now)
  • linear gradients (backgrouds only for now)
  • text-shadow

Usage

Download the htc file (above) Add this line to the top of your CSS file

For CSS3 defined in stylesheets:

html {behavior: url('css3.htc');}

That's it! Just attach it to the HTML element and you're done. Use the CSS3 styles in your stylesheet and they will just work. You only need to attach the HTC to the HTML element.

Note that the URL is relative to the location of the CSS file. Put the .htc in the same directory as your CSS file.

If you are using CSS3 in inline styles, you will need to specify the behavior as well:

<div style="border-radius: 20px; behavior: url('css3.htc');"> </div>

Feedback

Please send any comments/suggestions to tom@r.je.

to do list

I plan to add support for several more CSS3 features. This list is what I still would like to do and how easy I think they will be

  • background-size - 90% of the code is already there, just needs implementing. Medium priority.
  • multiple box shadows - Shouldn't be too difficult after now I've worked out how to do it very nicely with text shadows. High priority.
  • inset shadows - I have a couple of ideas of how this may be acomplished though it will require a lot of trial and error.
  • gradient stop points - Should be doable. First I need to properly understand the W3C specification. CSS3 gradients are confusing at best.
  • border-image - Will be quite easy to do but require a substantial amount of code.
  • full background-repeat support - currently no-repeat and repeat work as expected with background images. repeat-x and repeat-y need to be implemented. High priority
  • multiple backgrounds - CSS3 allows for multiple backgrounds (for example an image and a gradient). High priority, should be easy to implement using -css3-background.
  • rgba borders/text - Low priority
  • background-clip/background-origin - Limited usefulness anyway, very low priority
  • box-sizing - Doable but low priority

Updates

27/10/2010
  • Added full background-position support including pixels or "left top", "left center", "bottom right", etc. Background-size incoming shortly!
  • Improved load speed by around 50%
  • Fixed window resize bug that would sometimes cause an infinite loop
  • Fixed bug where having a body element without a border radius and with a background would hide the CSS3 effects

Changes made

The full list of changes made by me are:

  • Now allows the <body> element to have border-radius applied
  • Added dwestp...@filesmania.de's fix for (partial) background-position support
  • Fixed issue where adding a border to a div with a background image would incorrectly position the background image (by the size of the border)
  • Fixed issue where background fill would be black in nested elements that had border-radius applied
  • Fixed issue on 3 levels of nesting by changing to ondocumentready instead of oncontentready
  • Added a better, more easily forward compatible window_resize function
  • Added support for box-shadow
  • Added atg2dg's implementation of border-top-right-radius from http://code.google.com/p/curved-corner/issues/detail?id=22 and extended it to allow the shorthand version
  • Added element.redraw() function to elements which can be called by javascript to allow dynamic resizing of the element.
  • Added hover support (not for IE6, also slower than I'd like). If an element has a css hover style, it will correctly redraw the CSS3 effects if it changes size/shape
  • Made it so it will now automatically redraw the element when it changes (e.g. is resized in javascript. Will be slow if the change affects document flow. I don't suggest doing this in a timeout).
  • Fixed a z-index issue where effects would be hidden on elements with relative/absolute positioned parents that were overlapping static elements
  • Added basic linear gradient support, can't read existing -moz-gradient or -webkit-gradient as they are part of the background property and IE ignores them. Usage: -css3-background: linear-gradient(90deg,blue,red); Currently only supports this format.
  • Did a lot of code restructuring to make it more extensible, still needs a bit of tidying up though. (Work in progress)
  • Made it so you to initialise it you just add html {behavior:url('css3.htc');} to the top of your stylesheet.
  • Added support for text-shadow

IE6 Support

For IE6 support, the page must be running in standards mode. It is currently buggy. As it stands, border-radius, text-shadow and box-shadow work. RGBA and gradient support is missing.