The clip-path property sets a clipping region for an element. Content inside the region stays visible; everything outside is hidden.
Start with basic shapes: circle(), inset(), ellipse(), and polygon(). Unlike the deprecated clip property, clip-path works without absolute positioning and is the modern choice.
Not deprecated and not experimental. Prefer clip-path over clip for new work. Internet Explorer does not support it.
clip-path: none | circle() | inset() | ellipse() | polygon() | url() | initial | inherit;The initial value is none. The property is not inherited. A value other than none also creates a new stacking context.
| Value | Description | Try it |
|---|---|---|
none | No clipping (default) | Try it |
circle() | Circular region; optional at position | Try it |
inset() | Rectangle inset from the edges; optional round | Try it |
polygon() | Custom shape from a list of points | Try it |
ellipse() | Oval region with two radii | Try it |
initial | Resets to none | Try it |
inherit | Uses the parent’s clip-path value | Try it |
clip-pathGive the element a size and background (or image), then apply a shape.
clip-path with a basic shape such as circle(50%).at position, inset distances, or polygon points.| Piece | Required? | Role |
|---|---|---|
| Visible content | Yes | Background, image, or text to clip |
| Shape function | Yes (to clip) | circle(), inset(), polygon(), … |
position: absolute | No | Unlike old clip, not required |
| Square box | Helpful for circles | A non-square box can flatten a circle(50%) |
The blue square starts unclipped. Change only clip-path.
Each snippet focuses on clip-path. Size and background are only there so the shape is visible. Use Try It Yourself for a live editor.
Clip a square into a circle with a 50% radius.
<style>
div {
width: 160px;
height: 160px;
background: #2563eb;
clip-path: circle(50%);
}
</style>
<div></div>circle(50%) uses half the shorter side as the radius by default.Pull the visible area in from every edge, with rounded corners.
<style>
div {
width: 160px;
height: 160px;
background: #2563eb;
clip-path: inset(12% round 12px);
}
</style>
<div></div>12% value insets top, right, bottom, and left equally.round 12px curves the clipped corners.Connect three points to form a triangle.
<style>
div {
width: 160px;
height: 160px;
background: #2563eb;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
</style>
<div></div>x y as a percentage of the box.50% 0% is the middle of the top edge.100% 100% and 0% 100% are the bottom-right and bottom-left.If the shape looks wrong, check these first.
Clipping hides paint; the element still occupies its full width and height in the layout.
On a wide rectangle, circle(50%) can hit the short sides and look cut off. Use a square for a full circle.
clipThe old clip property is deprecated and rectangle-only. Prefer clip-path for new code.
Any value other than none creates a new stacking context, similar to opacity less than 1.
To hide overflowing children in a box, overflow: hidden is often enough. Use clip-path when you need a custom shape.
clip-path is a browser CSS property for clipping shapes. Node.js, Deno, and Bun do not apply it.
Basic shapes (circle, inset, ellipse, polygon): Chrome 55+, Edge 79+, Firefox 54+, Safari 13.1+. Internet Explorer has no support.
Bottom line: Safe for modern sites. Fall back to an unclipped box or overflow: hidden when IE matters. Newer functions like path() need newer browsers. It is not a runtime API.
circle(), inset(), and polygon().clip; no absolute position required.none. Not inherited. Non-none creates a stacking context.One line: sized box + clip-path: circle(50%); = circular visible region.
Set the foreground text and currentColor for borders and fills.
14 people found this page helpful