Jump to:

Shapes can be defined in several different CSS properties, including shape-outside and clip-path. In the Rules view these properties have a rectangular gray and white swatch next to them:

Clicking the swatch toggles the Shape Path Editor on and off — this is an outline around the shape generated by the CSS shape value, as seen in the browser viewport.

Each vertex of the shape has a drag handle over it — you can click and drag each drag handle to alter the shape — changing both the shape's visual output, and the corresponding CSS shape value in the Rules view.

If the shape is a polygon(), you can also double-click any edge of the shape to create a new drag handle in that position, and double click an existing drag handle to remove it (and the corresponding vertex) from the shape.

Browser support

The Shape Path Editor will be enabled by default in Firefox 60 for shapes generated via clip-path (bug 1405339). You can also use it to edit shapes generated via shape-outside, but only when you enable it via the layout.css.shape-outside.enabled pref.

Document Tags and Contributors

 Contributors to this page: Skierpage, jensimmons, Callahad, chrisdavidmills
 Last updated by: Skierpage,