Clip-Path Properties
Create custom shapes with CSS clip-path
10%
10%
10%
10%
0px
Live Preview & CSS
See your clip-path shape in action
.clipped-element {
clip-path: inset(10% 10% 10% 10%);
-webkit-clip-path: inset(10% 10% 10% 10%);
}inset(10% 10% 10% 10%)
Use inset() for rectangular shapes with optional rounded corners.
Circle and ellipse use percentages for radius and position.
Polygon coordinates are in percentages (x y, x y, ...).
Include -webkit-clip-path for better browser support.