CSS Corner Cutter
Generate a CSS clip-path/mask declaration that bevels, notches, or scoops each corner of a box independently — per-corner or one linked style and size, in px or %, with a live preview.
Input
Size unit for every corner cut below.
When enabled, the All Corners style and size apply to every corner.
Percent sizes above 50 are clamped so opposite corners can't overlap.
Output
Your cut-corner box will appear here.
Inline-styled div matching the preview above — paste anywhere.
Guides
What is a "cut" corner?
border-radius only ever produces a smoothly rounded corner. A cut corner is different — it removes a wedge of material from the box instead of curving it, and there are three common shapes for that wedge:
- Bevel — a single angled line, the classic "clipped corner" look on cards, buttons, and price tags.
- Notch — a right-angle step cut, giving a squared-off tab/ticket-stub silhouette.
- Scoop — a concave arc that curves inward from the corner, like a bite taken out of it.
This tool builds a ready-to-paste CSS declaration for any combination of the three, independently per corner, with a live preview.
How to use this tool
- Pick a Unit (
pxor%) — it applies to every corner's size below. - Leave Same for all corners on to set one Style and Size for all four corners at once, or turn it off to set each corner (Top Left, Top Right, Bottom Right, Bottom Left) independently — mix bevels, notches, and scoops freely, or leave a corner's size at
0to keep it square. - Copy the CSS and apply it to any element with a defined width/height. The Preview shows exactly what it looks like; the HTML Snippet below it is the same markup as a self-contained, inline-styled
<div>you can paste anywhere a stylesheet isn't convenient.
Why two different CSS techniques?
Bevel and notch are both made of straight lines, so they're expressed as extra points in a clip-path: polygon(...) — the same technique behind CSS Clip-Path Generator's shape library. A scoop is different: clip-path's polygon() can only draw straight edges between points, so there's no way to bow one inward into a smooth arc. Carving a concave curve needs a mask-image built from radial-gradients instead — one per corner, transparent inside the cut radius and opaque outside it. Because clip-path and mask are independent properties that both apply to the same element, this tool emits both blocks together whenever you mix straight cuts on some corners with a scoop on others; the browser renders their intersection.
FAQ
Will this work in every browser?
clip-path: polygon() and mask-image are both broadly supported in current Chrome, Firefox, Safari, and Edge. The generated CSS always includes the -webkit- prefixed form of whichever property is used, since Safari has historically needed it for mask-image.
Why is my percent-sized scoop smaller than I expected?
Percent sizes are capped at 50 so cuts from opposite corners can't cross into each other and overlap.
I just want simple rounded corners, not a cut — what should I use?
That's border-radius, not a cut — use the Border Radius Generator instead. If you're rounding the corners of an actual image you've uploaded (rather than generating CSS for a live box), use Round Corners.
Privacy
Everything happens in your browser. Your chosen styles and sizes are never sent to a server — the CSS and preview are generated and updated locally as you adjust the controls.
Use it from code
From 3 credits per callREST API
curl -X POST https://api.iotools.cloud/v1/tool/css-corner-cutter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"unit": "px",
"linked": "true",
"allStyle": "bevel",
"allSize": "24"
}'Swap in your own key from your account. The tool's fields are the body — no wrapper.
Ask an AI agent
Use the IOTools `css-corner-cutter` tool (CSS Corner Cutter) on this input:
YOUR_INPUT_HEREPaste this at any agent connected to the IOTools MCP server, then add your input.