clip-path
Creating a clipping region.
Overview
| Class | Declarations |
|---|---|
clip-none | clip-path: none;
|
clip-margin | clip-path: margin-box;
|
clip-border | clip-path: border-box;
|
clip-padding | clip-path: padding-box;
|
clip-content | clip-path: content-box;
|
clip-fill | clip-path: fill-box;
|
clip-stroke | clip-path: stroke-box;
|
clip-view | clip-path: view-box;
|
clip-path:<value> | clip-path: <value>;
|
clip-path:inset(<…>) | clip-path: inset(<…>);
|
clip-path:circle(<…>) | clip-path: circle(<…>);
|
clip-path:ellipse(<…>) | clip-path: ellipse(<…>);
|
clip-path:polygon(<…>) | clip-path: polygon(<…>);
|
clip-path:path(<…>) | clip-path: path(<…>);
|
clip-path:url(<…>) | clip-path: url(<…>);
|
Examples
Clip to a circle
A circular clip hides paint outside its boundary. The outer outline marks the unchanged 160 × 160 layout box; the circle has a 60px radius.
<!-- No clip · complete square --><div class="width:160px height:160px outline:1px|solid|var(--color-line-muted) bg-surface-base"> <img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block width:160px height:160px max-w:100% clip-none object-cover object-right" /></div><!-- Circle · 60px radius --><div class="width:160px height:160px outline:1px|solid|var(--color-line-muted) bg-surface-base"> <img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block width:160px height:160px max-w:100% object-cover object-right clip-path:circle(60px)" /></div>Generated CSS
@layer utilities { .clip-path\:circle\(60px\) { clip-path: circle(60px) }}The source still occupies the full image box. Clipping changes which parts are painted and excludes clipped areas from pointer hit testing. Labels and measurements remain outside the clip.
Clip with an inset
Inset values cut inward from the reference box. This example removes 8px at top and bottom, 24px at left and right, with 12px rounded corners.
<!-- Unclipped · original border --><div class="h:120px w:240px max-w:100% outline:1px|solid|var(--color-line-muted) bg-surface-base"> <div id="target" class="grid place-items:center h:120px w:240px max-w:100% b:2px|solid|var(--color-blue-60) font-md bg-blue-10 fg-blue-80 clip-none"> Clipped panel </div></div><!-- Inset · rounded paint boundary --><div class="h:120px w:240px max-w:100% outline:1px|solid|var(--color-line-muted) bg-surface-base"> <div id="target" class="grid place-items:center h:120px w:240px max-w:100% b:2px|solid|var(--color-blue-60) font-md bg-blue-10 fg-blue-80 clip-path:inset(8px|24px|round|12px)"> Clipped panel </div></div>The clip affects the background, border and contents together. The new curved edge is not a new border; the original blue border is clipped away. The outer neutral outline belongs to the surrounding layout box.
Remove clipping
Widen to sm to restore the complete image with clip-none. Print also shows the full square.
<!-- Circle → full image at sm --><div class="width:160px height:160px outline:1px|solid|var(--color-line-muted) bg-surface-base"> <img id="target" src="/demo/landscape.svg" width="320" height="200" alt="Blue and violet mountains beneath a yellow sun" class="block width:160px height:160px max-w:100% object-cover object-right clip-path:circle(60px) clip-none@print clip-none@screen@sm" /></div>Removing the clip reveals existing paint. The image dimensions and its position in normal flow do not change.
Apply conditionally
Widen the real preview viewport to sm to inset the panel. Print removes the clip and restores its complete border.
<!-- Full panel → inset at sm --><div class="h:120px w:240px max-w:100% outline:1px|solid|var(--color-line-muted) bg-surface-base"> <div id="target" class="grid place-items:center h:120px w:240px max-w:100% b:2px|solid|var(--color-blue-60) font-md bg-blue-10 fg-blue-80 clip-none clip-none@print clip-path:inset(8px|24px|round|12px)@screen@sm"> Clipped panel </div></div>The native condition affects only the clip. Keep meaningful controls and their focus indicators outside a decorative clipping region.