v147 · CSS · concept 2 of 3

Shape Palette

Eight shapes, each built with a single border-shape declaration. Hover to see the shadow shift. The border, background, and shadow all follow the polygon — no pseudo-elements, no SVG.

Requires Chrome 147+. Shapes render as rectangles in earlier browsers.

how it works

Every shape below is a single <div> with background, border, box-shadow, and border-shape. The polygon coordinates use percentage values so the shape scales with the element.

.shape {
  width: 100px;
  height: 80px;
  background: blue;
  border: 3px solid black;
  box-shadow: 4px 4px 0px black;
  border-shape: polygon(/* points */);
}

/* Example — hexagon */
.hexagon {
  border-shape: polygon(
    25% 0%, 75% 0%, 100% 50%,
    75% 100%, 25% 100%, 0% 50%
  );
}

Unlike clip-path, the border strokes along the polygon edge and box-shadow is cast from the polygon geometry — not the bounding rectangle.

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗