Firefox Developer Tools

Edit CSS shapes

CSS shape values in the Rules view have a regtangular gray and white swatch next to them:

Clicking the swatch toggles the CSS shapes highlighter 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 CSS shapes highlighter was enabled by default in Firefox 58 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: chrisdavidmills
 Last updated by: chrisdavidmills,