clip-path
Quick Summary for clip-path
The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
Code Usage for clip-path
/* Keyword values */ clip-path: none;  /* <clip-source> values */ clip-path: url(resources.svg#c1);  /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box;  /* <basic-shape> values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: ellipse(50px 60px at 0 10% 20%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');  /* Box and shape values combined */ clip-path: padding-box circle(50px at 0 100px);  /* Global values */ clip-path: inherit; clip-path: initial; clip-path: revert; clip-path: unset;
More Details for clip-path

clip-path

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

Syntax

/* Keyword values */ clip-path: none;  /* <clip-source> values */ clip-path: url(resources.svg#c1);  /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box;  /* <basic-shape> values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: ellipse(50px 60px at 0 10% 20%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');  /* Box and shape values combined */ clip-path: padding-box circle(50px at 0 100px);  /* Global values */ clip-path: inherit; clip-path: initial; clip-path: revert; clip-path: unset;

The clip-path property is specified as one or a combination of the values listed below.

Values

<clip-source>

A url() referencing an SVG <clipPath> element.

<basic-shape>

A shape whose size and position is defined by the <geometry-box> value. If no geometry box is specified, the border-box will be used as the reference box. One of:

inset()

Defines an inset rectangle.

circle()

Defines a circle using a radius and a position.

ellipse()

Defines an ellipse using two radii and a position.

polygon()

Defines a polygon using an SVG filling rule and a set of vertices.

path()

Defines a shape using an optional SVG filling rule and an SVG path definition.

<geometry-box>

If specified in combination with a <basic-shape>, this value defines the reference box for the basic shape. If specified by itself, it causes the edges of the specified box, including any corner shaping (such as a border-radius), to be the clipping path. The geometry box can be one of the following values:

margin-box

Uses the margin box as the reference box.

border-box

Uses the border box as the reference box.

padding-box

Uses the padding box as the reference box.

content-box

Uses the content box as the reference box.

fill-box

Uses the object bounding box as the reference box.

stroke-box

Uses the stroke bounding box as the reference box.

view-box

Uses the nearest SVG viewport as the reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the size of the reference box is set to the width and height values of the viewBox attribute.

none

No clipping path is created.

Note: A computed value other than none results in the creation of a new stacking context the same way that CSS opacity does for values other than 1.

Formal definition

Initial valuenone
Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Inheritedno
Percentagesrefer to reference box when specified, otherwise border-box
Computed valueas specified, but with url() values made absolute
Animation typeyes, as specified for <basic-shape>, otherwise no

Formal syntax

<clip-source> | [ <basic-shape> || <geometry-box> ] | none
where <clip-source> = <url><basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-box
where <inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )<path()> = path( [ <fill-rule>, ]? <string> )<shape-box> = <box> | margin-box
where <length-percentage> = <length> | <percentage><shape-radius> = <length-percentage> | closest-side | farthest-side<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<fill-rule> = nonzero | evenodd<box> = border-box | padding-box | content-box

Examples

Comparison of HTML and SVG

html,body {   height: 100%;   box-sizing: border-box;   background: #EEE; }  .grid {   width: 100%;   height: 100%;   display: flex;   font: 1em monospace; }  .row {   display: flex;   flex: 1 auto;   flex-direction: row;   flex-wrap: wrap; }  .col {   flex: 1 auto; }  .cell {   margin: .5em;   padding: .5em;   background-color: #FFF;   overflow: hidden;   text-align: center;   flex: 1; }  .note {   background: #fff3d4;   padding: 1em;   margin: .5em .5em 0;   font: .8em sans-serif;   text-align: left;   white-space: nowrap; }  .note + .row .cell {   margin-top: 0; }  .container {   display: inline-block;   border: 1px dotted grey;   position:relative; }  .container:before {   content: 'margin';   position: absolute;   top: 2px;   left: 2px;   font: italic .6em sans-serif; }  .viewbox {   box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset; }  .container.viewbox:after {   content: 'viewbox';   position: absolute;   left: 1.1rem;   top: 1.1rem;   font: italic .6em sans-serif; }  .cell span {   display: block;   margin-bottom: .5em; }  p {   font-family: sans-serif;   background: #000;   color: pink;   margin: 2em;   padding: 3em 1em;   border: 1em solid pink;   width: 6em; }  .none { clip-path: none; } .svg  { clip-path: url(#myPath); } .svg2 { clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');} .shape1 { clip-path: circle(25%); } .shape2 { clip-path: circle(25% at 25% 25%); } .shape3 { clip-path: fill-box    circle(25% at 25% 25%); } .shape4 { clip-path: stroke-box  circle(25% at 25% 25%); } .shape5 { clip-path: view-box    circle(25% at 25% 25%); } .shape6 { clip-path: margin-box  circle(25% at 25% 25%); } .shape7 { clip-path: border-box  circle(25% at 25% 25%); } .shape8 { clip-path: padding-box circle(25% at 25% 25%); } .shape9 { clip-path: content-box circle(25% at 25% 25%); }  .defs {   width: 0;   height: 0;   margin: 0; }  pre { margin-bottom: 0; }  svg {   margin: 1em;   font-family: sans-serif;   width: 192px;   height: 192px; }  svg rect {   stroke: pink;   stroke-width: 16px; }  svg text {   fill: pink;   text-anchor: middle; }  svg text.em {   font-style: italic; }

Complete example

HTML 
<img id="clipped" src="mdn.svg"     alt="MDN logo"> <svg height="0" width="0">   <defs>     <clipPath id="cross">       <rect y="110" x="137" width="90" height="90"/>       <rect x="0" y="110" width="90" height="90"/>       <rect x="137" y="0" width="90" height="90"/>       <rect x="0" y="0" width="90" height="90"/>     </clipPath>   </defs> </svg>  <select id="clipPath">   <option value="none">none</option>   <option value="circle(100px at 110px 100px)">circle</option>   <option value="url(#cross)" selected>cross</option>   <option value="inset(20px round 20px)">inset</option>   <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option> </select>
CSS 
#clipped {   margin-bottom: 20px;   clip-path: url(#cross); }
Result

Specifications

Specification
CSS Masking Module Level 1 # the-clip-path
CSS Shapes Module Level 2 # supported-basic-shapes

See also

Shapes in clipping and masking – and how to use them CSS properties: mask, filter Applying SVG effects to HTML content SVG attributes: clip-path clip-rule

Last modified: Feb 4, 2022, by MDN contributors

Select your preferred language English (US)DeutschFrançais日本語한국어Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in CSS
rgb() rgba() :right right @right-bottom :root rotate rotate() rotate3d() rotateX() rotateY() rotateZ() row-gap ruby-align ruby-position saturate() scale scale() scale3d() scaleX() scaleY() scaleZ() :scope scroll-behavior scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-left scroll-padding-right scroll-padding-top scroll-snap-align scroll-snap-stop scroll-snap-type @scroll-timeline
Related Search Terms
CSS font-family 6
CSS transform 4
CSS right 4
CSS opacity 5
CSS iframe 5
CSS color 5
CSS CSS Properties 5
CSS background-color 5
CSS width 4
CSS viewport 4
CSS padding 8
CSS Padding 5
CSS display 5
CSS attr 5
CSS text-align 5
CSS text 6
CSS active 5
CSS margin 10
CSS font 7
CSS box-shadow 44
CSS height 34
CSS position 6
CSS path 33
CSS margin-bottom 7
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

You come to understand that most people are neither for you nor against you, they are thinking about themselves. You learn that no matter how hard you try to please, some people in this world are not going to love you, a lesson that is at first troubling and then really quite relaxing.” ​


John W. Gardner
Random CSS Property

font-style

The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.
font-style css reference