O'Reilly logo

Eric Meyer on CSS: Mastering the Language of Web Design by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required