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.
[...] g
php, linux, web development, javascript, kae verens
« Rounded borders for IE, Konqueror and Firefox
[...]
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
[...] ph3n0m – ACK! My eyes!! Thankfully, I am not a designer, or I could probably top that
As a programmer, though – one of my demos was recently discussed on thedailywtf.com (the daily "what the ****??") [1]. to be honest, it’s not a bad demo, but there are easier solutions for most cases the demo might be used for. [0] klog? Blog Archive ? Rounded borders for IE, Konqueror and Firefox [1] The Daily WTF – "I think I’ll use AJAX and PHP and generated images as a background to fake support for a CSS3 element" __________________ verens.com, webworks.ie kfm.verens.com [...]
[...] If you’re developing a web page and want to get a curved border for a table, div element or other within that browser, make use of the -moz-border-radius: npx attribute in your stylesheet. Kae Verns has written a blog on a hack he developed to do this with cross browser support (konqueror, IE and Firefox) in a far more elegant fashion, as the CSS method as limitations, beyond being restricted to a single browser. [...]