Chrome 147 Ships border-shape and Element-Scoped View Transitions

Chrome 147 shipped in April 2026 with two CSS features that replace patterns frontend developers have been hacking around for years: border-shape for non-rectangular borders, and element-scoped view transitions for per-component animation control.

border-shape: borders that aren't rectangles

For years, if you wanted a border that followed a non-rectangular shape, you needed SVG, clip-path hacks, or pseudo-element trickery. Now it's native CSS:

.card {
  border: 2px solid var(--brand);
  border-shape: polygon(0 0, 100% 10%, 95% 100%, 5% 95%);
}

.tag {
  border-shape: shape(from 0 20%, to 100% 20%, via ellipse 50% 50%);
  border: 1px solid currentColor;
}

The border-shape property accepts the same values as clip-path (polygon, circle, ellipse, shape(), path()) and draws the border along that contour , with proper corner joins, miter limits, and dashed/dotted styles.

Element-scoped view transitions

Previously, view transitions applied to the entire document, useful for MPA navigation but overkill for a single component's state change. Now you can scope them to any element:

// Animate just this list when items reorder
const list = document.querySelector('.task-list');
list.startViewTransition(() => {
  sortTasks(newOrder);
});

/* Named transition groups within the scoped element */
.task-item {
  view-transition-name: var(--task-id);
}

This replaces a whole category of JavaScript animation libraries for list reordering, filter changes, tab switches, and any component-level state transition.

Also in Chrome 147

• contrast-color(), returns black or white for maximum contrast against a given color. Now Baseline (all major browsers).
• CSSPseudoElement interface, access ::before, ::after, ::marker as real objects in JavaScript.
• Decoupled width/style properties, computed values now reflect author intent, aligning with Firefox and WebKit behavior.

Browser support snapshot

Feature	Chrome	Firefox	Safari
border-shape	147	,	,
Element view transitions	147	,	,
contrast-color()	147 ✅	✅	✅
Anchor positioning	✅	🟡 Interop 2026	🟡 Interop 2026

The bottom line

border-shape and element-scoped view transitions remove two more reasons to reach for JavaScript positioning and animation libraries. They're Chrome-only for now, but both are likely Interop candidates. Use them as progressive enhancements with fallbacks today.