Rounded corners with CSS

Posted in CSS on 6 April 2005

A recent project needed rounded corners for some page elements and we thought about a few ways of doing this. The only problem was that our new website should use CSS without the use of tables for layout purposes….

Well, we were aware of a few methods but they all seemed to use various background image methods and involved adding extra divs to accommodate the nice corner images that we desired. That is until this method using CSS with JavaScript came to our attention.

What a great solution! No images were harmed in the making of these nice examples and the method can be applied to different page elements.

In fact, if you can live with a little semantic incorrectness then JavaScript is not needed for the first example.

Now updated with new version Nifty Corners

Related Posts

• Useful tip for creating double borders with CSS3
• CSS3 gradients are the next big thing
• Making circles with CSS3 border-radius
• How to create drop caps with CSS (and CSS3)
• Website case studies are a great way to learn
• CSS3 box-shadow and image hover effects