<basic-shape>

A CSS type that represents a geometric shape. These are used in properties like 'clip-path' and 'shape-outside' to create non-rectangular layouts, such as circles, polygons, or rounded boxes.

/* Usage Example */
.avatar {
  /* Clips the image into a perfect circle */
  clip-path: circle(50%);
}
Widely available Since 2020 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.

37+
54+
10.1+
79+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC