The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

Border and Box Effects 99

border-bottom-right-radius: 20px;

border-bottom-left-radius: 20px;

}

To create a shape with irregular rounded corners, you just use different

values on the individual properties:

div {

border-top-left-radius: 10px 20px;

border-top-right-radius: 10px 20px;

border-bottom-right-radius: 10px 20px;

border-bottom-left-radius: 10px 20px;

}

You can compare the two different code examples in Figure 9-3: the

shape on the left uses the first snippet and has four regular curved corners,

and on the right is the result of the second snippet with four (equal) irregu-

lar corners.

Figure 9-3: Two elements, one with regular rounded corners (left) and one with irregular

corners (right)

The border-radius Shorthand

If having to write a different property for each corner strikes you as quite

repetitive, you’ll be happy to learn that a shorthand property is available.

As with border-width, margin, and padding, you can specify one, two, three,

or four values. Where those values refer to sides, however, the border-radius

values refer to corners, starting at the top left:

E { border-radius: [top-left] [top-right] [bottom-right] [bottom-left]; }

E { border-radius: [top-left] [top-right & bottom-left] [bottom-right]; }

E { border-radius: [top-left & bottom-right] [top-right & bottom-left]; }

E { border-radius: [top-left & top-right & bottom-right & bottom-left]; }

So if I want to apply a value of 20px to the top-left and top-right corners

of a div, and 10px to the bottom-right and bottom-left corners, here’s the

code I use:

div { border-radius: 20px 20px 10px 10px; }

noTe Using the shorthand syntax like this only creates regular rounded corners; I’ll cover
the shorthand for irregular corners momentarily.