last update : 18 August 2011

In the past it was impossible to create any kind of curved shapes using pure HTML. There were three methods to generate layouts with rounded corners :

• CSS
• Javascript
• Images

There were a lot of tutorials available on the net how to create rounded corners with CSS. A simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript was the online tool Spiffy Corners from Greg Johnson.

One of the first creators of CSS layouts with rounded corners was Alessandro Fulciniti. He improved his Nifty Corners technique by adding Javascript.

Both methods didn’t work as expected on elements with fixed height, even if a external wrapper was applied. For this reason I preferred the image method with four corner images. Douglas Livingston‘s demo-page show a simple way how to do it (creative commons license). Another useful tutorial about rounded corners has been published by Trenton Moss, complete overviews of techniques are available at CSSjuice and Smileycat.

With HTML 5 and CSS3, the described techniques have become obsolete. CSS3 supports native rounded corners.