Clip-path - Property CSS
Summary of characteristics of the clip-path property
SVG: containers except defs, graphic elements, use.
none | border-box | content-box | fill-box | margin-box | padding-box | stroke-box | view-boxnoneComputed value: during an animation, the clip-path property gradually changes from one value to another.Syntax diagram of the clip-path property.
clip-pathThe 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:
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.
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 (x1andy1for example). The coordinates of each of the points are separated by commas.
More information: see the full syntax for the
polygon()function. - clip-path: path('...');
The function
path()draws a shape from straight line segments and curves. It accepts a string containing a series of commands. These commands consist of a letter followed by one or more values, according to the syntax of SVG. The unit is not indicated after the values: it is necessarily the pixel.For more information: refer to the complete syntax of the function
path(). - clip-path: shape(...);
The function
shape()also draws a shape from straight segments and curves, just like the functionpath(). But its syntax is closer to CSS, with units to specify the values.For more information: refer to the complete syntax of the function
shape(). - 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-boxdefines 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.
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.
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.
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.
clip-path property which clips (or masks) an element according to a geometric shape.fill-box used with the property clip-path.stroke-box used with the property clip-path.view-box used with the property clip-path.path() function used with the clip-path property to define a polygon.clip-pathproperty
fill-boxvalues
stroke-boxvalue
view-boxvalue
path()function
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
Historic of the clip-path property.
-
CSS Masking Module Level 1
Regardingclip-path. Introduction to the standard of masking techniques.
First definition of theclip-pathproperty.
November 15, 2012Working Draft.
August 26, 2014Candidate Recommendation.
See also, about masking techniques.
The specification module that standardizes everything related to masking is called CSS Masking Module.
The clip-path property and the following properties are referenced in this module:
Properties: