Curvy Corners, the easy way.

I don’t know what it is, but I have this real uncertainty about using too many images on an interface - like where you would have to use four Gifs to make a box look like it had rounded corners. I think it comes from a time when we had spacer Gifs and tables, and there was a load of stuff going on in the code just to make something look a certain way.

And besides, I’m rubbish at image slicing and positioning.

Thankfully I have found a nice script. “Curvy Corners” is a 23kb JavaScript file that can be bound to any DIV element and generate really neat anti-aliased corners, whilst the colours and borders remain the DIV’s own CSS properties.

Okay. I can understand the implications of using JavaScript, and the 23kb file - but most people have JavaScript turned on, and how big are a set of Gifs? The real advantage of this is that when you are developing you can quickly and easily change the colour, borders and curvature of the box without having to open Photoshop.

It even works in I.E 6 & 7 beta!

Demo 1 - Red box with 3px white border, 20px radius. Demo 2 - Photograph with 20px radius.

Thoughts?

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Technorati
  • SphereIt
  • StumbleUpon
  • Ma.gnolia
  • NewsVine
  • Furl