Rounded corners are the bane of a website designer’s life. I can take them or leave them; for some reason, graphic designers seem to swoon at the slightest hint of revealed shoulder. And, while Mozilla has a CSS extension which does them, and CSS 3 standardises it, if you want them cross-browser then you used to be stuck with tables, or wrapping your divs in up to three others and using background images.
However, another alternative is script. If your site already requires JS, then you can now have lovely rounded corners in all modern browsers using a simple script and CSS include without the need for extra markup.
Trouble is you still need meaningless markup to implement it.
Exactly. This is just a mess. On one project I was working on, I wanted smooth corners without all the fuss, so I wrote a piece of script that will apply corners to any image, on the fly.
Literally, all you have to do is put some inline javascript that says:
apply_corners(“object_name”, true, true, true, true, “images/blue”);
The first parameter is the object name, the next four tell it which corners to apply(in this case, all of them) and the last one is what folder the corners are located in. (so that you can have different colors for different images, for example)
The outside script will automatically append the images to the document and position the corners precisely where they need to be. No extra coding is necessary, it works in every Javascript capable browser I’ve been able to get my hands on, and non-Js browsers won’t even notice something’s missing.
I’ve been pretty pleased with it and have been meaning to post it online somewhere.
Nice, thanks for the link.
L
You can also use xbl for this:
http://wargers.org/xbl/rondehoek/roundcorners.htm
http://wargers.org/xbl/rondehoek/
Robin: how far did you read? The final solution presented doesn’t require any extra in-page markup.
$cir: but what you outline is almost exactly what the final solution presented on that page does (although he doesn’t use images).
Gerv, I’d view all the ‘s as extra in-page markup and I tend to agree with Robin here.
Oops, I wasn’t aware that your comments allowed HTML. There’s supposed to be a <b> there, not actually making the text bold.
David: I don’t see what the problem is here – arguably, it adds extra in-page markup, but since it’s dynamically added (notice that you don’t see it with a “view source”) I’d argue that it’s actually a further separation of content and presentation. The page remains remarkably maintainable and all it takes are a few javascript calls. Not too shabby, imo.
Oops, I stand corrected. Not far enough obviously :)
That makes two of us, Robin. Great code then. :p