shapes
The circle(), ellipse(), inset(), and polygon() CSS shape functions create shapes for use with clip-path and shape-outside.
Overview
The circle(), ellipse(), inset(), and polygon() CSS shape functions create shapes for use with clip-path and shape-outside.
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 circle(), ellipse(), inset(), and polygon() CSS shape functions create shapes for use with clip-path and shape-outside.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features