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