Eric Meyer on CSS: Mastering the Language of Web Design

Curves Ahead

So far, we’ve seen how to put boxes together to create irregular shapes and how to use borders to create diagonal lines. What about curves, though? Is it possible to coax HTML elements into showing curves?

The basic answer is “no.” But with simple images and some creative styling, we can set up curved corners and even have text flow along a curve instead of inside boxes.

Pulling Up a Toadstool

Given the topic being discussed on the page, it would be kind of nifty to create a mushroom-shaped layout, wouldn’t it? Of course it would. So let’s fiddle with a few margins to get the basic toadstool shape out of our layout (see Figure 10.9).

div#p1 {margin: 0 2em;}
div#p2 {margin: 0 10em;} div#menu {float: right; width: 5em; padding: 0; ...