‘Nifty Corners’ in CSS
Web-graphics.com points us toward this very cool tutorial for Nifty Corners. What are they? Rounded corners on elements using CSS and javascript. I’ve seen a number of techniques for doing rounded corners and virtually all of them rely on one of three things: extra tags inserted into the markup, a specifc browser, or images. This technique, though, uses javascript to dynamically “insert” that extra markup and achieves it without images. Plus, it works in a nice variety of browsers and degrades well. Check out the examples in the article for some impressive stuff.
The redesign I’m working on for this site uses rounded corners visually and the current implementation only works in Mozilla/Firefox; everyone else just sees plain squared corners. I think I’ll definitely have to see how this new technique works for it instead.
(Note: the article linked above is an english translation of the original italian article written for http://pro.html.it/.)
Posted Wednesday March 16, 2005 in (X)HTML and CSS by Chris Curtis
This is an older entry and as such, it may be by a guest author or contain formatting problems / extraneous code. If you notice something wrong with the entry, please use the Contact page to let me know the entry title and issue.
Just as a note: I messed around with adding this to the EE Gallery. It can work, but if your images are of disparate size, get ready for some wild stretching and crunching of images. This script is currently, as far as I can tell, only appropriate if all the images are the exact size. Otherwise your proportions will get very ... whacky.
By Lisa on March 20, 2005 at 09:03pm link