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

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.

• Select an element that has a clip-path or shape-outside property applied.
• In the Rules sidebar (in the Inspector panel), the clip-path property will have a little shape icon. Click on this icon.
• The shape now gets highlighted in the page, with control points.
• Click-and-drag any of these points to change the shape to your likings.

Learn more about this tool here