Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
Edit clip-path and shape-outside CSS properties by dragging points in the page
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.
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
- In the Rules sidebar (in the Inspector panel), the
clip-pathproperty 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