Clip-path - Property CSS

clip-path

Summary of characteristics of the `clip-path` property

Quick description

Defines the visible part of the element, delimited by a geometric shape (rectangle, polygon, etc.).

Status

Standard

Applies to

HTML : tous les éléments.
SVG : containers.

Usable for

HTML, SVG

Predefined values

Percentages

To be seen depending on the shape function that is used.

Initial value

none

Inherited by default

No.

Animation type

Computed value : during an animation, the clip-path property gradually changes from one value to another.

W3C Module

CSS Masking Module

References (W3C)

CSS Masking Module Level 1

Document status: CR (Candidate Recommendation)

Syntax diagram of the `clip-path` property.

Syntax scheme of the property clip-path
The links in the diagram provide access to more details
Download the schematic in SVG

In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:

shape is a basic geometric shape, defined by one of the CSS functions: circle(), ellipse(), inset(), path(), polygon().
url is the path to a file, most often SVG.

Description of the `clip-path` property.

clip-path defines a geometric outline (circle, star, etc.) that will be used to cut out part of the element. Here are two examples of what you can get with clip-path.

CSS and HTML are not really programming languages: they lack the usual algorithmic structures in programming: tests, loops, etc. They are nevertheless languages because they each have a vocabulary and syntax. On the other hand, XML defines a syntax but not a vocabulary. In this sense, XML cannot be considered a language, but rather as a standard, a reference on which other languages will be able to be built. CSS is a complement to all these languages based on HTML or XML: it enriches their possibilities by bringing many possibilities formatting and layout.

Cutting along a circle

Cutting an image along a polygon

Note: Parts of the element that are hidden by clip-path are also immune to mouse events, especially clicks.

Values for `clip-path`.

clip-path: none;

Default. No cutting is made: the entire element is visible.
clip-path: inset(h d b g);

The inset() function defines a rectangle that will be used to cut the element: the parts outside the rectangle are not displayed.

Refer to the inset() function page for a complete description of the syntax of this function.
clip-path: circle(r at x y);

As the name suggests, the circle() function defines a circle that will be used to split the element: Only the part that is inside the circle is displayed.

Refer to the circle() function page for a complete description of the syntax.
clip-path: ellipse(r1 r2 at x y);

Similar to the previous one, the ellipse() function defines the ellipse that will be used to split the element: Only the part that is inside the ellipse is displayed.

See the full syntax for the ellipse() function.
clip-path: polygon(x1 y1,x2 y2,...);

Finally, the polygon() function defines a surface bounded by a broken line. Only the part that is inside this polygon is displayed.
Each vertex of this broken line is a point defined by its coordinates (x1 and y1 for example). The coordinates of each of the points are separated by commas.

More information: see the full syntax for the polygon() function.
clip-path: url(...);

The url() function refers to an SVG file. The shape defined by this file will be the clipping of the element. The URl indicated can be summed up as a bookmark (starting with #) referring to an SVG element present on the page.
clip-path: ... content-box; clip-path: ... padding-box; clip-path: ... border-box; clip-path: ... margin-box; clip-path: ... fill-box; clip-path: ... stroke-box; clip-path: ... view-box;

These values, which follow a shape function, indicate the reference against which the shape should be calculated. For example circle(50%) border-box defines a circle centered on the surface of the element including the border.
clip-path: initial; (none) clip-path: inherit; clip-path: revert; clip-path: revertLayer; clip-path: unset;

These values are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

Examples with the `clip-path` property.

Round images.

Very fashionable for some time, round images are really very easy to obtain with clip-path as you will see in the first example. The second example is a bit more complicated and required a bit of SVG.

Example with clip-path


svg xmlns="http://www.w3.org/2000/svg"
  clipPath id="ring"
    path d="M100,0 
                 A50,50 0 1 0 100,200 A50,50 0 1 0 100,0 Z 
                 M100,60 
                 A40,40 0 1 1 100,140 A40,40 0 1 1 100,60 Z"
    /
  /clipPath
/svg

Animation of the `clip-path` property.

The possibilities of animation are endless: each of the shape functions accepts numerical values, which it is easy to animate in a very progressive way.

Animation of clip-path

Manipulating the `clip-path` property programmatically.

Change the value of `clip-path` with Javascript.

In Javascript, here's how to change the value of clip-path. We see that Javascript offers a syntax with the typical CSS notation, in kebab-case (a hyphen to separate words), and another syntax with the camel-case notation more common in Javascript (a capital letter to separate words).


	let el = document.getElementById('id');
	el.style['clip-path'] = 'circle(2.5cm)';
	// or
	let el = document.getElementById('id');
	el.style.clipPath = 'circle(2.5cm)';

Read the value of `clip-path` in Javascript.

This code only rereads the value of the clip-path property if the property was assigned via the style attribute of the element, so in the HTML code. Values set in styles via CSS selectors are not taken into account.


	let el = document.getElementById('id');
	let value = el.style['clip-path'];
	// or
	let el = document.getElementById('id');
	let value = el.style.clipPath;

Read the computed value of `clip-path` in Javascript.

The computed value is the result of the valuation of the cascade of inheritances. If no value is set for the clip-path property, neither on the element itself, nor on one of its ancestors, the calculated value is the initial value of clip-path, i.e. none.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('clip-path');

Change the value of the `clip-path` property with JQuery.

Just like Javascript, JQuery also accepts both notations for the property name, in camel-case or kebab-case.


 $('#id').css('clip-path', 'circle(2.5cm)');
 // or
 $('#id').css('clipPath', 'circle(2.5cm)');

Read the computed value of the `clip-path` property with JQuery.

The code is shorter than in Javascript, but gives the same result.


	let value = $('#id').css('clip-path');

Other codes.

See Javascript and CSS for more Javascript or JQuery code samples.

Test it yourself.

The first button below applies the entered value to the clip-path property and then displays the value as it was applied. The second button displays the computed value. The latter allows you to see how the value of clip-path is stored (serialized). In particular, we can see that the percentages are well remembered as percentages but that all the other units are converted into pixels.

Simulator.

We apply clip-path:ellipse() to the demo element followed by the value chosen as the reference block.

Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. Is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra. Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra. Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax.

Browsers compatibility with `clip-path`.

The clip-path property is handled well, including specifying a box after the shape function. See the compatibility chart below.

Column 1

Support by browsers for the clip-path property which clips (or masks) an element according to a geometric shape.

Column 2

Support for the value fill-box used with the property clip-path.

Column 3

Support for the value stroke-box used with the property clip-path.

Column 4

Support for the value view-box used with the property clip-path.

Column 5

Support for the path() function used with the clip-path property to define a polygon.

clip-path
property

fill-box
values

stroke-box
value

view-box
value

path()
function

Estimated overall support.

95%

92%

94%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Chrome

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `clip-path` property.

CSS Masking Module Level 1

Introduction to the standard of masking techniques.
First definition of the clip-path property.

November 15, 2012
Working Draft.
August 26, 2014
Candidate Recommendation.