DevTools Tips

Edit clip-path and shape-outside CSS properties by dragging points in the page

Categories: Supported by:

The clip-path property is a great way to change the final shape of an element and give it the shape that you want.
You can use this property to make an element be a circle, an ellipse, a polygon or any shape that can be described with an SVG path.

The shape-outside property is similar in that you can define a shape, but it's useful to float other content around an element, along that shape.

In Firefox, you can freely edit the polygon, circle or ellipse types of shapes with the mouse, by dragging points around in the page.

Learn more about this tool here

Gif demo of the shape editor in firefox, clicking on the Rules panel icon, and then moving points around in the page