Shapes & images

circle()

A circle with a radius and an optional centre given with at <position>. The radius is a length, a percentage, or closest-side (the default) or farthest-side. Percentages resolve against the diagonal of the reference box divided by √2.

img.avatar { clip-path: circle(50%); }
.figure { float: left; shape-outside: circle(); }

ellipse()

An ellipse with two radii, horizontal then vertical, and an optional centre. Each radius is a length, a percentage of the matching dimension of the reference box, or closest-side or farthest-side.

inset()

A rectangle given by how far each edge is inset from the reference box, with one to four values in the same order as margin. An optional round followed by border-radius values rounds its corners.

clip-path: inset(0 0 0 0 round 1rem);

rect()

A rectangle given by the positions of its top, right, bottom and left edges, each measured from the top or left edge of the reference box. auto puts that edge on the box's own edge. It can take round corners like inset().

xywh()

A rectangle given by the x and y position of its top-left corner, then its width and height. It can take round corners like inset().

polygon()

A polygon from a comma-separated list of x y vertex positions. The optional fill rule, nonzero (the default) or evenodd, decides what counts as inside when edges cross.

clip-path: polygon(50% 0, 100% 100%, 0 100%);

path()

A shape or path from an SVG path data string, the same syntax as the d attribute of an SVG <path>. The coordinates are in pixels, so the shape does not scale with the box; use shape() for a responsive path.

shape()

A path written as CSS drawing commands instead of an SVG string, so its coordinates can be percentages, calc() expressions and custom properties, and it scales with the box. It starts from a point, then lists commands separated by commas.

The to forms take absolute positions in the reference box; the by forms are relative to the current point.

clip-path: shape(from 0 0, hline to 100%, vline to calc(100% - 2rem), line to 50% 100%, line to 0 calc(100% - 2rem), close);

ray()

An offset-path that is a straight line from the element's offset position at a given angle. The size sets how long the ray is (closest-side by default, or farthest-side, closest-corner, farthest-corner or sides), contain shortens it so the element stays inside its containing block, and at <position> sets where it starts.

offset-path: ray(45deg closest-side);
offset-distance: 100%;

superellipse()

A corner curve for corner-shape, set by one number. 1 is a normal round corner, 2 a squircle, 0 a straight bevel, -1 a scoop, infinity a square corner and -infinity a notch; values in between blend smoothly, so the corner shape can be animated.

url()

A reference to a resource such as an image, font or SVG filter. A relative URL resolves against the stylesheet it appears in, not the page. The URL can be quoted or unquoted; only the quoted form can be followed by request modifiers.

<url-token> is the unquoted form, url(image.png), in which spaces, quotes and brackets must be escaped. The request modifiers change how the browser fetches the resource:

background-image: url("hero.avif");
mask-image: url("https://cdn.example.com/mask.svg" cross-origin(anonymous));

image-set()

A list of alternative images from which the browser picks the best one for the screen's resolution and the formats it supports, like srcset on an <img>. Each option is an image with an optional resolution (1x, 2x, 192dpi) and an optional type() giving its MIME type.

background-image: image-set(
  "hero.avif" type("image/avif"),
  "hero@2x.jpg" 2x,
  "hero.jpg" 1x
);

cross-fade()

An image that blends two images together, each weighted by a percentage. Safari supports only the original form: two images followed by one percentage, cross-fade(url(a.png), url(b.png), 50%), not the comma-separated list in the current syntax.

paint()

An image drawn by a paint worklet, JavaScript registered with CSS.paintWorklet.addModule() under the given name. Any further arguments are passed to the worklet's paint function. The image is redrawn when the box size or the custom properties it reads change.

filter()

An image with filter functions applied to it, so you can blur or recolour just a background image rather than the whole element.

background-image: filter(url("photo.jpg"), blur(4px) grayscale(1));