28 Mar

Rounded borders for IE, Konqueror and Firefox

In short: this is a method for applying rounded borders with one single line of CSS. No messy tables, no messy :before{content()} stuff – just plain old border-radius.

I had an idea last week – a border can easily be faked by giving an element a background which has a border painted into it…

This set off a chain of thoughts, which basically ended with this:

if all existing browsers have trouble rendering rounded borders (yes, even firefox), then why not just remove them completely from the CSS and render them as a background image in PHP?

In other words, scan the CSS, grab any CSS relating to rounded borders, and render the borders as a background image.

This thought was electric! Why hadn’t I thought of it before? Why hadn’t anyone else thought of it?

Before you get bored, here’s the example. Note that the source brings in two external items – the CSS (which is very plain), and the script for rendering it.

Here’s the source. Just link it into your page and then add some border-radius magic to your CSS. It should work straight out.

The script grabs external CSS using XMLHttpRequest – there does not seem to be an ECMAScript method to extract un-parsed CSS (and I’ve scoured the DOM standards documentation!).

A major advantage this method has over previous methods is that you can have a background image, which is clipped properly by the server-side script. Other methods involve adding images to the corners, which, if background images are involved, mean very careful planning to make sure the corners don’t clash.

8 thoughts on “Rounded borders for IE, Konqueror and Firefox

  1. Pingback: klog » Blog Archive » how the border-radius hack works

  2. Hi, im sorry but i cannot manage to get it working. I receive this error in IE: ‘XMLHttpRequest’ is undefined.

    What could be the problem?

    Bas

  3. Bas, XMLHttpRequest is the protocol on which AJAX is based. You need to also include an xMLHttpRequest parser (see ie7-xml-extras.js here)

    btw: The article you are commenting on is soon to be obsolete. Please look here for a more advanced method which does not require PHP.

  4. Dear god, this is the worst abuse of technology I have ever seen. I think it even beats most of the stuff on thedailywtf.com.

  5. Pingback: Your most embaressing site - Irish SEO, Marketing & Webmaster Discussion

  6. Pingback: No Signal » Blog Archive » Curved borders in Firefox

Comments are closed.