Skip to main content

Spanky Corners 1.0 : Rounded Corners + Clean HTML + No JavaScript

By Alex Walker



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

Of the many interesting arguments raised during our recent discussions centering around Greg’s Spiffy Corners and markup in general, one point was difficult to argue — ’If you say this isn’t the answer, what’s your alternative?

Fair point too.

At the time, I successfully skated around a real answer to that question but, with a Design View due and nothing to write about, I decided to take a crack at an answer. The alternative I published last month was quite raw, but with plenty of help from Lox, Matt, Kevin, Tom and Craig, Spanky Corners is now at a stage where we think it’s relatively robust, useful and usable to a wide range of web developers.

The advantages are easy to recognize.

Screenshot of Spanky Corners

  • Super low-fat HTML
  • No JavaScript required
  • No practical limitations on corner radius
  • Valid XHTML (strict) and CSS
  • Accessible
  • Tiny graphic requirements
  • We generate the images and CSS for you!

The only foreseeable drawbacks we see are:

  • Dependence on a minimum HTML structure (i.e. single paragraphs can’t work).
  • SOLVED: An IE6 user scaling his/her font-size up will see a small gap develop at the top left

I’m still not convinced there isn’t a way around the IE6 issue, so let me know if you hit paydirt.

Spanky is tested in IE6, IE7, Firefox 1.5, Safari 1.0 and Opera 8.53.

We decided to totally ignore IE5+5.5 support as those browsers don’t support list-images well enough. In practice, we recommend using conditional comments to strip the rounded graphics from IE5 altogether.

We’ve provided a fairly in-depth explanation on how it all works and FAQ, but you might want to just play with the generator and the code to get a feel for it.

Hope you find it handy, and if you stumble across any improvements, lets us know. It’s certainly a work-in-progress.

We’ve rejigged the way IE renders the top-left corner ( basically swapping the list-image for first-letter in IE only ) allowing it to scale smoothly in both directions. If you wanted to update any code you downloaded earlier, you’ll only need to update the conditional comments.

We have also broken the IE-specific code into it’s own style sheet and made the whole thing downloadable as a ZIP file.

Take Spanky for a test-drive here

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 40+ of SitePoint's book covers.

New books out now!

Get practical advice to start your career in programming!

Master complex transitions, transformations and animations in CSS!

Latest Remote Jobs