This diagram illustrates two block boxes, one next to the other, with rectangular clipping regions of similar dimensions but using the two different value functions and producing the same visual result.
The block boxes (generated for a P element) are identical and depicted with a dashed dark gray border and a light gray background.
The clipping region of the first box, demonstrating the rect() function, shows the first P box lies entirely within it, offset 30% from the top edge, 25% from the left edge of the P box, and 100% from the left edge (representing the right edge) and 70% from the top edge (representing the bottom edge). The clipping region has a solid border and a white background and is labeled "clip region".
Additionaly the first box has four red arrows representing the four offsets in the coresponding style rule: one short, vertical arrow labeled "30%" goes from the top edge of the block box to the top of the clipping region; one longer, vertical arrow labeled "70%" goes from the top of the block box to the bottom of the clipping region; one short, horizontal arrow labeled "25%" goes from the left edge of the block box to the left edge of the clipping region; and one long, horizontal arrow labeled "100%" that goes from the left edge of the block box to the right edge of the clipping region (which in this case, is also the right edge fo the block box).
The clipping region of the second box, demonstrating the inset() function, shows the second P box lies entirely within it, offset 30% from the top edge, 25% from the left edge of the P box, and 0% from the right edge and 30% from the bottom edge. The clipping region has a solid border and a white background and is labeled "clip region".
The second box has three red arrows representing the three of the four offsets in the coresponding style rule: one short, vertical arrow labeled "30%" goes from the top edge of the block box to the top of the clipping region; one short, vertical arrow labeled "30%" goes from the bottom of the block box to the bottom of the clipping region; one short, horizontal arrow labeled "25%" goes from the left edge of the block box to the left edge of the clipping region; and the final (right) side of the clipping region is labled "0%" and is not represented by an arrow since the right edge of the block box and the right edge of the clipping region are the same.