Take a look at this example page, and notice the
rounded corners—but there's not a single rounded-corner image on the page. Alessandro Fulciniti created it using his
Nifty Corners technique, which uses a few extra CSS elements on the top
and bottom of an element to create the appearance of rounded corners.
Creating round
corners with CSS isn't new, but the nice thing about Alessandro's technique is that it uses JavaScript to move the
extraneous markup out of the HTML. You can use his library to round any element's corners by including the provided
JavaScript library, then making a function call for each element you want rounded. If JavaScript isn't supported,
everything works fine, but with square corners.
The JavaScript function for rounding actually takes a CSS selector rather than an element ID as a parameter, which
means you can do things like rounding all of the paragraphs ("p" elements) on a page. The function to accomplish this
actually accounts for about half of the otherwise simple
JavaScript Code. The rest is pretty simple DOM
scripting to add the elements, and their style is specified with
CSS. Nifty!
[via 456 Berea Street]
