clip path css
CSS clip-path Property
Example
Clip an image to a 50% circle:
img {
clip-path: circle(50%);
}
Definition and Usage
The clip-path property lets you clip an element to a basic shape or to an SVG source.
Note: The clip-path property will replace the deprecated clip property.
CSS Syntax
clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;
Property Values
Value Description
clip-source Defines a URL to an SVG <clipPath> element
basic-shape Clips an element to a basic shape: circle, ellipse, polygon or inset
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 reference box
stroke-box Uses the stroke bounding box as reference box
view-box Uses the SVG viewport as reference box
none This is default. No clipping is done