shape() for clip-path / offset-path

Baseline 2026 (Chrome 135, Safari 18.4, Firefox 148 in February 2026). Chrome 149 also allows it in `shape-outside`.

Chrome 135Edge 135Safari 18.4Firefox 148

A path syntax written in CSS units and math instead of SVG's unitless numbers, so clip shapes can be responsive (`line by 100% 0`, `arc to ...`). Speech-bubble tails, notches and slanted sections stay crisp at any size.

Speech bubble with a shape() tail

CSS

.fx-033{
  --tail:14px;
  background:#2563eb;color:#fff;padding:12px 16px calc(12px + var(--tail));font-family:system-ui;max-width:260px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--tail)),40px calc(100% - var(--tail)),26px 100%,26px calc(100% - var(--tail)),0 calc(100% - var(--tail)));
  clip-path:shape(from 0 0,hline to 100%,vline to calc(100% - var(--tail)),hline to 40px,line by calc(-1 * var(--tail)) var(--tail),vline to calc(100% - var(--tail)),hline to 0,close);
}

HTML

<div class="fx-033">Speech bubble with a shape() tail</div>

Fallback: Keep a `polygon()` clip-path before the shape() line for older browsers, or accept a plain rectangle.

Source: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/148 and https://developer.chrome.com/release-notes/149

Prompt

Write responsive clip shapes with `clip-path: shape(from X Y, line to ..., hline to ..., vline to ..., arc to ..., curve to ..., close)` using percentages, px and calc() instead of `path()` with unitless coordinates. Provide a `polygon()` fallback declaration above it. Use the same `shape()` in `offset-path` for motion along the shape.