CSS border-shape

at a glance

why it exists

Non-rectangular UI elements — tooltips with arrow tails, hexagonal avatars, chevron breadcrumbs, scalloped cards, speech bubbles — have always required SVG, hacks with pseudo-elements, or clip-path which removes hit-testing outside the clip region. border-shape gives a single CSS property that strokes any arbitrary shape as the element's border, clips the interior so backgrounds and children are contained, and still lets the rectangular box model govern layout.

Syntax

Value definition from the CSS Borders and Box Decorations Level 4 editor’s draft propdef table, quoted verbatim as fetched on 2026-08-02:

border-shape: none | [ <basic-shape> <geometry-box>? ]{1,2}

The draft is still moving: Chrome 147 shipped the two-shape form with a / separator (as documented in the shipped-syntax table and examples below, and in Una Kravets’s launch article — the ChromeStatus record’s sample link), while the current draft grammar shows a space-separated {1,2} repetition with an optional <geometry-box> per shape. Where they disagree, test in the browser and expect the implementation to converge on the spec over time.

The shipped property (Chrome 147)

Accepted shape functions

Examples

Feature-detect before relying on the property — it is Chromium-only (Chrome and Edge; see the compatibility table):

@supports (border-shape: circle()) {
  .avatar { border-shape: circle(); }
}

Pentagon border

.badge {
  width: 80px;
  height: 80px;
  border: 3px solid steelblue;
  background: aliceblue;
  border-shape: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

Circle border

.avatar {
  width: 64px;
  height: 64px;
  border: 2px solid navy;
  border-shape: circle();
}

Tooltip with arrow (shape() path)

.tooltip {
  border: 2px solid #333;
  background: white;
  padding: 8px 12px;
  /* Rounded rectangle with downward arrow at the bottom-centre */
  border-shape: shape(
    from 12px 0,
    line to calc(100% - 12px) 0,
    arc to 100% 12px of 12px,
    line to 100% calc(100% - 20px),
    arc to calc(100% - 12px) calc(100% - 8px) of 12px,
    line to calc(50% + 10px) calc(100% - 8px),
    line to 50% 100%,                /* arrow tip */
    line to calc(50% - 10px) calc(100% - 8px),
    line to 12px calc(100% - 8px),
    arc to 0 calc(100% - 20px) of 12px,
    line to 0 12px,
    arc to 12px 0 of 12px,
    close
  );
}

Browser compatibility

Specifications

see also

• CSS Borders and Box Decorations Level 4 — border-shape spec
• chromestatus — CSS border-shape (5459864205393920)
• gendn — Corner shaping (corner-shape) — a related Chrome 147 feature for curve style
• chrome-platform-showcase — live demo