Clip

Clip CSS properties define a clipping path that determines the visible portion of an element.

Clip Properties

Defines the shape that determines which part of an element should be visible.

none — no clipping path
url(...) — e.g. url(resources.svg#id); referencing an SVG <clipPath id="..."> element (see <clipPath> example here)
a geometry box — use the specified box, including corner shaping via border-radius, to be the clipping path; specify any of: margin-box, border-box, padding-box, content-box, fill-box, stroke-box, view-box
a basic shape — see basic shape data type, e.g. circle(...), ellipse(...), polygon(...)

<div id="clip-path-example">
  <img src="/res/unsplash/andrew-ridley-jR4Zf-riEjI-unsplash.jpg"/>
</div>

<div id="clip-path-example">
  <img src="/res/unsplash/andrew-ridley-jR4Zf-riEjI-unsplash.jpg"/>
</div>

#clip-path-example {
  width: 300px;
  height: 200px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

#clip-path-example {
  width: 300px;
  height: 200px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

| LIVE PREVIEW

Deprecated, use the newer clip-path property instead.

Defines a visible portion of an element. Only applies to absolutely positioned elements (i.e., those with position: absolute or position: fixed.)

Specify:

auto — no clipping (default)
rect(top, right, bottom, left) — e.g. rect(0, 175px, 113px, 0) (as offsets from the top/left border); defines the rectangle for the clipping

div {
  clip: rect(1px, 10em, 3rem, 2ch);
}