Corner Shaper

Corner Shaper is a visual editor for styling div container corners using modern CSS clip-path features. It lets you design unique shapes for feature and pricing cards, banners, and UI elements without writing any code and using just a single wrapper element.

The tool was created specifically for pagebuilder users working in platforms like Breakdance, Elementor, Bricks, Oxygen, and Webflow. While visual builders provide native controls for typography, spacing, and layout, their container settings usually stop at basic rounded corners. Corner Shaper focuses on advanced corner geometries that builders cannot do natively, avoiding the need for complex CSS or stacked wrapper divs.

Corner Shaper generates modern CSS clip-path declarations and vector SVG markup, so you can copy the code directly into your workflow. You can also copy shapes directly into Figma as vector nodes or download the SVG to continue editing paths in any vector design tool.

Supported corner styles

• Round: Standard circular corner arcs defined in pixels.
• Squircle: Superellipse corner curves calculated through cubic bezier path approximations.
• Inverted: Concave inner notches with individual controls for entry radius, middle radius, and exit radius, or a unified linked radius.
• Steps: Stepped chamfer transitions with adjustable step count from 3 to 10 steps, along with optional corner roundness for wavy steps.
• Zigzag: Serrated cuts with configurable segment count, amplitude depth, and pseudo-random seed variation.
• Bevel: Diagonal chamfers with independent or linked width and height values for asymmetric angles.
• Folded: Diagonal cutouts with generated absolute-positioned pseudo-elements and drop shadows to simulate turned-over corner flaps.

Control capabilities

• Corner selection: Each corner (top-left, top-right, bottom-left, bottom-right) can be configured independently or disabled.
• Global synchronization: A sync toggle applies identical style, dimension, and curve settings across all active corners.
• Dimension adjustments: Corner widths and heights adjust from 0px to 150px.
• Curve tuning: Inverted corners allow unlinking of the three constituent curve radii (r1, r2, r3) for asymmetric transitions.

Browser compatibility

• CSS polygon clip-paths: Supported in all modern browsers, including Chrome, Edge, Firefox, Safari, and major mobile browsers.
• CSS path strings: Supported in Chromium-based browsers (Chrome 88+, Edge 88+), Firefox 71+, and Safari 13.1+.
• Folded corner pseudo-elements: Uses standard absolute positioning and CSS filter drop-shadow rules supported across all contemporary browsers.
• SVG exports: Conforms to the W3C SVG specification and renders across all standard vector viewers and browsers.

Export formats

• CSS: Generates clip-path polygon or path strings ready for insertion into custom CSS fields or stylesheet rules.
• SVG: Exports downloadable SVG files matching the exact geometry previewed on canvas.
• Figma: Copies vector SVG markup to the system clipboard for direct pasting as editable vector nodes in Figma.

Workflow with visual page builders

1. Design your shape in the visual editor.
2. Copy the generated CSS code from the output panel.
3. Paste the code into the custom CSS field or class selector of the target container in the page builder.
4. Manage backgrounds, padding, child layout, typography, and borders using the builder's native settings.