v147 · CSS · Layout · demo

Progress Steps

A checkout-style step indicator where each step is a chevron shape using border-shape. The border, background, and focus outline all follow the shape. Step forward and back — completed steps fill solid; the active step stays light. Without border-shape this requires CSS triangle hacks or separate SVG arrows.

Chrome 147+ — border-shape property. In older browsers the steps fall back to rectangular boxes with arrow separators.

Click Next / Back to advance through the checkout flow · border-shape keeps borders and shadows on the chevron geometry

border-shape: polygon(chevron) — Chrome 147+

✓Cart

2Shipping

3Payment

4Review

Shipping Address

Enter your delivery details. All fields marked * are required.

Old approach: rectangular steps + arrow separators

✓ Cart

›

2. Shipping

›

3. Payment

›

4. Review

Separate arrow spans — not part of the step geometry, can't share the border/shadow.

/* Chevron step using border-shape */
.step {
  padding: 0.75rem 3rem 0.75rem 2rem;
  border: 2px solid black;

  /* border-shape redefines the box geometry */
  border-shape: polygon(
    0% 0%, calc(100% - 16px) 0%, 100% 50%,
    calc(100% - 16px) 100%, 0% 100%,
    16px 50%
  );
  /* border, background, shadow, outline all follow this shape */
}

/* Without border-shape: need CSS triangle hacks via ::before/::after,
   clip-path loses the border, box-shadow doesn't follow the clip */

implementation reference

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

see also

implementation reference