CSS clip-path

The clip-path property defines the visible region of an image.

The region is clipped with a given path or SVG element.

The region inside the path is visible; the rest is not.



An image clipped with a circular clip-path.

Van Gogh Bedroom
  .clipped {
    clip-path: circle(50%);
    height: 350px;

<img src="/img/css/the-bedroom.jpg"
     alt="Van Gogh Bedroom"
     class="clipped" />

Using clip-path

The clip-path property clips (or crops) an element.

The clipping path is a basic shape or SVG source.

This property replaces the obsolete clip property.


clip-path: clip-source | basic-shape | margin-box | 
           border-box | padding-box | content-box | 
           fill-box | stroke-box | view-box | none;



Value Description
none Default. No clipping will be applied.
basic-shape Clips an element to a basic shape: circle, ellipse, polygon or inset
margin-box Uses margin as reference box
border-box Uses border as reference box
padding-box Uses padding as reference box
content-box Uses content as reference box
fill-box Uses object bounding box as reference box
stroke-box Uses stroke as reference box
clip-source Sets URL to an SVG element
view-box Uses SVG viewport as reference box

More Examples

Click the buttons to see different clip-path options.

Van Gogh's Bedroom

clip-path: ellipse(50% 30% at 50% 50%)

  .clip-path-example {
    clip-path: ellipse(50% 30% at 50% 50%);
    height: 350px;

<img src="/img/css/the-bedroom.jpg"
     alt="Van Gogh's Bedroom"
     class="clip-path-example" />
<p id="text">clip-path: ellipse(50% 30% at 50% 50%)</p>

Browser support

This table shows when clip-path support started for each browser.

55.0 Dec 2016
54.0 Jun 2017
12.0 Jul 2015
42.0 Dec 2016
9.1 Mar 2016

You may also like

Last updated on Sep 30, 2023