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.
Pingback: klog » Blog Archive » how the border-radius hack works
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
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.
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.
lol! you could say that.
http://thedailywtf.com/forums/thread/109077.aspx
Pingback: Your most embaressing site - Irish SEO, Marketing & Webmaster Discussion
Pingback: No Signal » Blog Archive » Curved borders in Firefox