How to Clip Elements into Shapes with CSS
Clip-path turns rectangles into circles, triangles and frames without extra images. This guide covers the common shapes and when each one fits.
What is the CSS Clip Path Generator?
Clip-path trims an element's visible area into a shape, so a plain rectangle can show as a circle, an ellipse, a triangle, a diamond or a rounded inset frame. Choose a shape and a size, and this tool writes the clip-path rule. The size setting controls circles and ellipses; the polygon and inset presets use fixed points that read well at any size.
How to use it
- Choose a shape from the list.
- Set the size percentage for circles and ellipses.
- Click Generate clip-path CSS and copy the rule into your stylesheet.
Worked example
With the circle shape and a size of 50, the result is a .clipped rule with clip-path: circle(50% at 50% 50%).
When should I use clip-path instead of border-radius?
Use border-radius for rounded corners on boxes. Use clip-path when you want a genuinely different outline, such as a circle avatar, a triangle badge or a diamond tile.
Frequently asked questions
Does clip-path hide the rest of the element?
Yes. Everything outside the shape is clipped away, though the element still takes up its normal space in the layout.
Do polygon and inset presets use the size value?
No. Those presets use fixed points chosen to look balanced, while the size value controls circles and ellipses.