Chamfer

The word comes from workshops, not from screens. Machinists and woodworkers distinguish two ways of taking the sharpness off an edge: a chamfer removes the corner with a flat angled cut, usually at 45 degrees, while a fillet replaces it with a curve. The cut is measured by its leg, the distance it eats back along each face, which is why a drawing calls out something like “2 mm x 45 degrees” rather than a radius. Chamfers exist for practical reasons before they are decorative: they take the burr off a machined edge, give a bolt or a shaft a lead-in so it can find its hole, and stop a sharp corner from cutting the hand that picks the part up. All of that is what a chamfered corner is quietly borrowing when it appears in an interface. It looks like something that was made on a machine, because on real objects it is.

On the web the shape is usually cut rather than described. clip-path with a polygon is the compatible route, listing eight points instead of four so each corner is replaced by a short diagonal, and it works everywhere clip-path does. Its cost is that clipping is applied to the whole element: the border, the box shadow, and the focus ring are all cut away with the corner, so a chamfered control often has to redraw its own outline as an inner layer. A background-only version is cheaper still, since a linear gradient with a hard stop at a transparent leg produces the same silhouette without touching layout. The newer route is CSS corner-shape, which lets border-radius describe the size of the corner while the shape keyword decides whether it is turned through an arc or cut flat. That one keeps the border and the shadow following the real outline, which is exactly the thing clip-path cannot do, and it is recent enough to be worth checking support for before it carries a layout.

The register it lends is specific. Rounded corners have read as friendly and modern since the first iPhone, so cutting a corner instead is one of the fastest ways to say the opposite: hardware, instrument panel, spacecraft, weapon crate. It is a load-bearing part of cassette-futurism and of most cyberpunk-ui work, where an angled corner reads as a chassis rather than a card, and retro-futurism uses it for the same reason. It also has a much older life in ornament: art-deco cut its corners as a matter of course, and printed tickets, coupons and boarding passes have used clipped corners for so long that the shape alone says “tear here”. Compare squircle, which is the opposite extreme of the same decision: a corner so continuously curved that the transition disappears, where a chamfer makes the transition into a visible face of its own.

Two clarifications worth keeping straight. A chamfer is geometry and bevel is shading. A bevel leaves the outline alone and paints a lit face and a shadowed face so a flat rectangle appears to have a raised edge; a chamfer changes the actual silhouette and may be painted entirely flat. Objects often have both, since a real chamfered edge catches light differently from the faces either side of it, but they are separate claims and only one of them survives a screenshot at 1 bit. The other is practical: keep the cut a fixed length rather than a percentage. A percentage chamfer grows with the box, so the same component reads as a delicate machined edge in a narrow column and as a hexagon in a wide one, and content padding has to clear the cut or the first line of text will run into the diagonal.