Corner Shaper

Corner Shaper: A Free Visual Editor for CSS clip-path Corner Shapes

Corner Shaper is a browser-based editor for shaping the corners of a div. Rounded corners are the one treatment every visual builder ships natively; anything past that — a concave notch, a stepped chamfer, a folded flap — normally means hand-written CSS or nested wrappers. Corner Shaper produces all of it with modern CSS clip-path on a single element: toggle the corners you want, pick a style, drag a few sliders, copy the rule. It was written for Breakdance, Elementor, Bricks, Oxygen and Webflow users, whose container settings stop at a border-radius field, but the output is plain CSS and works anywhere.

Key Features

• Eight corner styles — Round, Squircle, Blob, Inverted, Steps, Zigzag, Bevel and Folded, each with its own controls rather than one generic radius.
• Per-corner control — Each of the four corners is configured independently, or a Sync All toggle applies one set of settings to all of them.
• Live preview — Shape and generated CSS update together as you drag, so you read the real rule, not a picture of it.
• Free, with no account — A static page that runs entirely in the browser: nothing to sign up for, nothing uploaded, no watermark, no paid tier.
• Three export paths — Copy the CSS, download a standalone SVG, or copy markup that pastes into Figma as vector paths.

The Eight Corner Styles

Round is a plain circular arc, sized in pixels up to 150px, as is every style here. Squircle approximates a superellipse with cubic beziers — the continuous corner a border-radius cannot produce. Blob generates organic lobes with a bulge from 0 to 100%, one to four lobes, and a shuffle that reseeds it. Inverted cuts a concave notch inward, its three radii unlinkable for an asymmetric transition. Steps builds a chamfer of three to ten steps, with optional roundness up to 25px for a wavy staircase. Zigzag serrates across two to twenty segments with adjustable amplitude and its own reseed. Bevel is a diagonal chamfer whose width and height unlink for an off-angle cut. Folded is the outlier: as well as clipping, it emits a positioned pseudo-element with a drop shadow to fake a turned-over paper corner.

What It Outputs

The CSS panel emits a clip-path: shape() declaration built from line and arc commands with calc() offsets, which is what keeps it responsive — corners stay fixed in pixels while the edges track the box. Folded arrives as a short block instead: position: relative, the clip-path, and a nested ::before carrying a polygon() clip and a drop-shadow filter.

How to Use Corner Shaper

1. Toggle on the corners you want to shape, or hit Sync All to treat them as one.
2. Pick a style, then set the size and any style-specific controls.
3. Copy the CSS, export the SVG, or copy the shape to Figma.
4. Paste the CSS into your builder's custom CSS field; backgrounds, padding, typography and borders stay on the builder's own settings.

Browser Support and the SVG Fallback

The rules use CSS shape() from CSS Shapes Level 2, now shipped in all three major engines — Chrome 135, Safari 18.4 and Firefox 148 — so current browsers render it natively. Older ones will not, and neither will Firefox ESR 140, still the build on many managed desktops. The SVG export is the documented way around that — use the file as an image or mask. Folded's pseudo-element is a separate matter, needing only absolute positioning, polygon() clipping and drop-shadow.

Who It's For

• Page-builder users in Breakdance, Elementor, Bricks, Oxygen or Webflow who need a corner the builder cannot make
• Front-end developers who want a working clip-path: shape() rule instead of hand-plotting beziers
• Designers who want the shape as an SVG or a Figma vector path
• Anyone building feature cards or banners that need a distinctive edge

Conclusion

Corner Shaper is narrow on purpose, and that is the point: it does the one thing visual builders leave undone, and hands back real code, not a screenshot. It is free outright — no account, no watermark, no paid plan — so the only real constraint is browser support, which the SVG export covers.