Rounded borders for IE, Konqueror and Firefox
Posted by: Kae Verens, in ajax, general, javascript, web developmentIn 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.
Entries (RSS)
March 29th, 2005 at 9:57 pm
[...] g
php, linux, web development, javascript, kae verens
« Rounded borders for IE, Konqueror and Firefox
[...]
May 13th, 2005 at 12:21 pm
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
May 13th, 2005 at 2:19 pm
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.
December 30th, 2006 at 9:06 am
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.
December 30th, 2006 at 10:16 am
lol! you could say that.
December 31st, 2006 at 7:34 pm
http://thedailywtf.com/forums/thread/109077.aspx
January 17th, 2007 at 1:39 pm
[...] 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 [...]
March 18th, 2007 at 3:43 pm
[...] 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. [...]