Pure CSS Rounded Box

Original Experiment Date
June 9, 2003
Description

This experiment should definitely be seen in the context of its time: it was the heyday of rounded corners. Numerous techniques were developed in all corners of the web to add a round touch to the square designs, but most approaches were markup and image intensive. As a counter strike I decided I could do the same without images! Pure unadulterated CSS rounded corners!

I was inspired by one of Literary Moose's experiments with rounded boxes, when I came up with this approach. It tries to emulate rounded boxes with pure CSS by using bullets as the corners. There is a pure CSS variant which inserts the bullets with generated content, which only works in Opera 7+ but a slightly adapted version with the bullets defined in the HTML code works in most regular browsers.

In my opinion, by far the most elegant technique ever for rounded corners was developed by Virtuelvis.

Test
Enjoy Pure CSS rounded Corners.
Advantages
Slightly adjusted version works well and looks nice on a wide variety of browsers.
Disadvantages
A problem is that a lot of code is needed for the rounded corners (although I decimated the required coded in a rewrite), no borders are possible and it probably only works on Windows due to platform differences in glyph rendering. Therefore, this is not a viable practical approach to rounded corners.
Browser support
Opera 7+, with adaptations IE5+ and Gecko-based.

© 2003-2006, Mark Schenk.