Archive for the ‘CSS’ Category

CSS Rounded Corner Roundup

Published in: CSSPosted by Jon Henshaw on 07/27/08

The past several years have introduced many different solutions for creating rounded corners using CSS. Some of the solutions use images, while others don’t – while others require assistance from JavaScript. The great thing about Snipplr is that we capture all of these rounded corner techniques on one page. Below is a highlight of some of the best rounded corner techniques.

100% CSS ROUNDED CORNERS !! No IE sorry!

As is common with techniques that use Web standards, when implemented, they don’t work with Internet Explorer (IE). This is one simple technique that uses very simple CSS that adjusts the border radius, but alas, croaks in IE.

Rounded Corners Without Images Or JavaScript

We move onto the next solution that theoretically does work in IE and also doesn’t require images or JavaScript (JS). Unfortunately, it does utilize a lot of CSS code.

Rounded Corners With Images

Failing to be impressed with a lack of images, one can opt for images with this technique. The CSS gets a little shorter and slightly more elegant — now we’re getting somewhere reasonable.

Anti-Aliased Curvy Corners

But if you like to live on the edge and you crave more code that you can shake a stick at, then Curvy Corners is for you. It’s all JS, all the time. It will create on-the-fly rounded corners for any HTML DIV element, that (supposedly) looks as good as any graphically created corners.

If none of the above solutions peak your interest, then feel free to peruse the full list of rounded corner solutions.