CSS clip-path Property

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.

Example

#

An image clipped with a circular clip-path.

Van Gogh Bedroom
<style>
  .clipped {
    clip-path: circle(50%);
    height: 350px;
  }
</style>

<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.

Syntax

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

Values

#

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%)

<style>
  .clip-path-example {
    clip-path: ellipse(50% 30% at 50% 50%);
    height: 350px;
  }
</style>

<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.

Chrome
55.0 Dec 2016
Firefox
54.0 Jun 2017
IE/Edge
12.0 Jul 2015
Opera
42.0 Dec 2016
Safari
9.1 Mar 2016

You may also like

Guides