<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.
Syntax
/* Usage 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.
37+
54+
10.1+
79+