“Bullet-Proof” Rounded Corners

When I wrote this article in 2002, it was one of the few methods for making rounded corners. CSS support in web browsers has improved dramatically since then and I no longer use this technique. Instead I use background-images and wrapper divs as needed.

Zusätzliches Markup und Bilder mit Klassen. Alt aber stabil.


CSS Rounded Corners example

This trick uses background images, one for each corner. The focus here is getting it to work in the simplest way possible, without trying to hack fixes together for the benefit of specific browsers. It is designed to just work.

Wieder mal eine Lösung mit Bildern und zusätzlichem Markup. Diese Lösungen scheinen die derzeit stabilsten zu sein.


Rounded corners in CSS

There are other ways that I’ve seen it done, but the other methods always require lots of complex HTML and CSS. I figure that lots of nested divs aren’t much better than using a table, so my way doesn’t require much in the way of HTML or CSS. Here’s how I do it.

Create four images for your corners. Most graphics programs have a tool that will create rounded-off squares. I’ll be using this square here…

Einfache Lösung mit geringem x(