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

Blend Modes, Filter Effects, and Masking 239

You can round the corners, but the values must be the same for each
corner—you can’t set an individual value per corner. You can, however, set
x-axis and y-axis values to make irregular radii:

E { -webkit-clip-path: inset-rectangle(o1, o2, o3, o4, rx, ry); }

The biggest difference from the standard is in the rectangle() function;
this was originally defined in the spec but has since been pushed back to
a future version. The rectangle() function also lets you create rectangular
clipping shapes but using coordinates rather than offset values. It accepts
up to six arguments:

E { -webkit-clip-path: rectangle(x, y, w, h, rx, ry); }

The first four arguments are required: x and y set the x- and
y- coordinates of the top-left corner of the shape, relative to the top-left
corner of the target element; and w and h set the width and height, respec-
tively, of the shape. The optional rx and ry arguments can be used to set
the border-radius of all corners of the clip path. (You can use one value
to make an equal radius, but you can’t set each corner individually.)
Figure 18-12 shows how these six values set the clipping area of an
image.

x

y

w

h

rx

ry

Figure 18-12: Six values for the rectangle() shape function that set the
clipping area