<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.
Quick example
.avatar {
/* Clips the image into a perfect circle */
clip-path: circle(50%);
}<basic-shape> Browser Support
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.
Safe to use without fallbacks.
37+
54+
10.1+
79+