shapes
The <basic-shape> CSS data type represents a shape used in the clip-path, shape-outside, and offset-path properties.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 37 | 79 | 54 | 10.1 | 37 | 10.3 | |
animation Animation | 37 | 79 | 54 | 10.1 | 37 | 10.3 |
| The circle() CSS function defines a circle using a radius and a position. It is one of the basic-shape data types. | 37 | 79 | 54 | 10.1 | 37 | 10.3 |
| The ellipse() CSS function is one of the basic-shape data types. | 37 | 79 | 54 | 10.1 | 37 | 10.3 |
| The inset() CSS function defines a rectangle at the specified inset distances from each side of the reference box. It is a basic shape function used to define one of the basic-shape data types. | 37 | 79 | 54 | 10.1 | 37 | 10.3 |
| The polygon() CSS function is one of the basic-shape data types. It's used to draw a polygon by providing one or more pairs of coordinates, each of which represents a vertex of the shape. | 37 | 79 | 54 | 10.1 | 37 | 10.3 |
Syntax
.circle {
clip-path: circle(50%);
}
.diamond {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.rounded {
clip-path: inset(10% round 20px);
}Live demo
Use cases
-
Using shapes
The <basic-shape> CSS data type represents a shape used in the clip-path, shape-outside, and offset-path properties.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.