Spanky Corners 1.1 beta

Spanky Corners

What?

'Spanky Corners' is an experimental technique for using only CSS to produce 'round-cornered content boxes' with semantically pure markup. It does not require JavaScript to work

Why?

SpankyCorners has a number of advantages over alternative rounded corners methods.

1. Spanky requires no extra HTML markup to act as 'CSS hooks'.
2. Spanky doesn't rely on a set width box.
3. Spanky doesn't require JavaScript.
4. Spanky corners can have (practically) any radius with no significant increase to file size.
5. Spanky requires only 4 small GIFs.
6. We generate the required images for you while you wait!

News

We're always happy to hear any feedback/suggestions for Spanky via this blog entry.

Update: 8 May, 2006: Fixed a Firefox 1.0 render bug which was making the site look wacky. Fixed a mistake in the download code that stopped IE from rendering properly.

Update: 3 May, 2006: Solved the IE6 scaling problem. Scale to your heart's content. However it does sacrifice a little padding control on the headings in IE. Also made the whole kit'n'caboodle downloadable as a ZIP file (thanks to fine work by Lox).

Update: 28 April, 2006: A few changes. Most obviously we've moved the generator into a more 'SitePoint-like' setting. Spanky Corners now also zoom smoothly up and down in all browsers except IE6, where the top left corner shows a gap when the text is scaled up. Solutions are very welcome.

Update: 19 April, 2006: We had trouble getting IE6-7 to work with corner radii less than 17px (IE reserves that much space for it's bullets), but Matt Magain has come up with a nice solution. It does require IE's Conditional Comments at this stage.

Update: 15 April, 2006: Updated the way the images are generated and the code algorithms. Should work reliably in IE6-IE7 on most settings -- with the exception of very large or very small curves. However manual tinkering with the code should get virtually any setting to work.

Launch: 13 April, 2006 The Spanky Corners Generator doesn't yet work flawlessly in IE6 and IE7 (working on it right now) though the technique itself does. You're welcome to play with the generator as we work on it.

This idea was first demonstrated in the April 2006 edition (#20) of the SitePoint Design View.