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

100 Chapter 9

To illustrate the shorthand property in action, I’ll apply rules to three

elements, each time with a different set of values:

.radius-1 { border-radius: 0 20px; }

.radius-2 { border-radius: 0 10px 20px; }

.radius-3 { border-radius: 0 0 20px 20px; }

You can see the results in Figure 9-4. The first (left) box has two values

for border-radius: The top-left and bottom-right corners have a value of 0,

so are square, but the top-right and bottom-left are rounded with a radius

of 20px. The second (middle) box has three values: The top-left corner is

once again square, but now the top-right and bottom-left corners have a

10px radius, and the bottom-right corner has a value of 20px. Finally, the

third (right) box has four values: The top-left and top-right corners have a

value of 0, so are squared, whereas the bottom-right and bottom-left have

radii of 20px.

Figure 9-4: Effects of different values for the border-radius shorthand property

You can also use the shorthand syntax with irregular curves. To achieve

this effect, you list the values separated by a slash (/):

border-radius: { horizontal-radius / vertical-radius; }

Each side of the slash can contain between one and four values, as with

the shorthand for regular curves. This means, for example, you could have

one value for the horizontal radius and four separate values for the vertical

radii. Again, I’ll illustrate what this looks like with some examples:

.radius-1 { border-radius: 20px / 10px; }

.radius-2 { border-radius: 20px / 10px 20px; }

.radius-3 { border-radius: 10px 20px 20px / 20px 10px; }

Figure 9-5 shows the results. The first (left) box has four equal corners

of 20px horizontal and a 10px vertical radius. The second (middle) box has

two corners of 20px/10px and two of 20px/20px. The third (right) box

has a top-left corner of 10px/20px, a top-right and a bottom-left corner of

20px/10px, and a bottom-right corner of 20px/20px.