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.