Basic Shapes

Reveal a circle, ellipse, or inset region with clip-path. The layout box stays rectangular.

circle, ellipse, inset

clip-path: circle(50%); clip-path: ellipse(45% 35% at 50% 50%); clip-path: inset(12% 8% round 16px);
circle

circle(50%)

ellipse

ellipse(…)

inset

inset(… round)

Important HTML

A solid box receives the clip.

<div class="swatch swatch-circle">circle</div>

Important CSS

Basic shapes hide paint outside the geometry.

.swatch-circle { clip-path: circle(50%); }
.swatch-ellipse { clip-path: ellipse(45% 35% at 50% 50%); }
.swatch-inset { clip-path: inset(12% 8% 12% 8% round 16px); }