CSS Cut Corner Generator

Chamfered corners - the straight-cut answer to border-radius. Set how deep the cut goes, or switch to the single-cut and notched variants in the same tool.

About cut corners in CSS

Rounded corners are the default look of the web, and a chamfer is the quickest way out of it. Cutting a corner off at 45 degrees instead of bending it reads as technical, industrial, ticketed - the look of dashboards and sci-fi interfaces, of admission tickets and warning labels. CSS has a property for rounding corners and nothing at all for cutting them, so the job falls to clip-path.

The code

.shape {
  clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%);
  width: 240px;
  height: 240px;
  background: #0d6efd;
}

Six points instead of four: the two cut corners each become two points with a diagonal between them. This preset chamfers the top-left and bottom-right, the diagonally opposite pair that gives a box its sense of direction. The Cut size setting moves all four of those points together.

Note that the cut is a percentage of each axis, so on a wide element the diagonal is not at 45 degrees - it is stretched with the box. If you need a true 45-degree chamfer at any width, use pixels: polygon(16px 0%, 100% 0%, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0% 100%, 0% 16px). That version does not scale with the element, which is usually what you want for a corner detail.

Which corners, and how many

Cut corner - two opposite corners chamfered, as above. The most useful default: it looks deliberate rather than damaged.
Single cut corner - one corner only, with a deeper cut available. This is the "folded page" or "new document" shape, and the one to use for a corner badge.
Notched box - a rectangular bite taken out of a corner rather than a diagonal, for cards that have to make room for a floating control.
Ticket - semicircular notches punched into the sides, which is the other thing "cut corner" sometimes means.
All four - not a preset, but easy: open the shape in the studio and drag the two remaining corners into place, or add points with a double-click.

Why not just wait for corner-shape?

CSS has a corner-shape property that lets border-radius describe a bevel, a scoop or a notch instead of an arc. Where it is available it is the better tool, because the corner is still a corner: borders bend round it and box-shadow follows it, neither of which a clip can do. Support arrived browser by browser rather than all at once, so check whether the ones you care about have it before you rely on it. A clip-path is the version that works everywhere, and switching later is a small change - the shape is the same either way.

Frequently asked questions

Can I put a border on a box with cut corners?

Yes - the Border control writes it as two layers on one element, since a real border is clipped away with the corners. This is the shape the trick suits best: every edge is straight, so the ring round the chamfer is exactly as thick as the ring along the sides.

Two newer properties will change this, and the chamfer is the shape they were made for. corner-shape lets border-radius describe a bevel instead of an arc, which gives a chamfered box a real border - dashes and all - with no clipping at all. border-shape goes further and draws a real border along any <basic-shape>, with the background and box-shadow following the outline rather than being masked by it; it renders solid only, and today it is a Chrome Canary flag rather than something to ship. Until then the two-layer version is the one that works everywhere.

How do I keep the chamfer the same size on every card?

Use pixel or rem values in the polygon rather than percentages, as in the snippet above. Percentages scale the cut with the element, so a tall card gets a taller chamfer than a short one, and a row of different-sized cards ends up looking inconsistent.

Does the cut corner clip the content inside?

Yes - anything in the cut triangle is invisible. With a modest cut and normal padding it never comes up, but watch absolutely positioned badges and icons parked in a corner, since those are exactly where the cut is.

Can I animate the cut opening up?

Yes, as long as both polygons have the same number of points in the same order. Transitioning from a 5% cut to a 30% cut is smooth, because only the numbers change. Transitioning from a four-point rectangle to the six-point cut version is not, so start from a rectangle written with six points and a zero-size cut.

Menu