# Chrome 147 ships scoped view transitions and new CSS color and border tools

> Chrome 147 brings concurrent element-level view transitions, automatic black-or-white contrast selection, and shape-aware border painting.

Canonical URL: https://www.devobs.io/news/news-chrome-147-web-platform-release/
By: Theo Morgan
Published: 2026-09-06T11:58:54.648Z
Updated: 2026-09-06T11:58:54.648Z
Event date: 2026-04-07
Section: Web

Chrome 147 began rolling out on April 7 with element-scoped view transitions, the CSS `contrast-color()` function, and `border-shape`. Google’s [release summary](https://developer.chrome.com/blog/new-in-chrome-147) presents the three as tools for interactive motion, accessible color selection, and non-rectangular border rendering.

## Transitions can stay inside a component

The new `element.startViewTransition()` method lets an arbitrary HTML element establish the transition scope. Its pseudo-elements are affected by ancestor clipping and transforms, and separate elements can run transitions concurrently. Scoped transitions can also be nested while the rest of the page remains interactive.

That changes the design space for dashboards and editors. A card can animate between states without taking over the document-wide transition layer, while another region continues its own update. The failure case is overlapping ownership: if parent and child components both start transitions for the same state change, visual output and cancellation rules need deliberate testing.

`contrast-color()` accepts a color and returns black or white based on which has higher contrast. It can simplify text color over dynamic swatches, but choosing between two candidates does not establish that every combination meets a project’s required contrast threshold. `border-shape` paints shaped borders and clips the inside, serving a different purpose from `clip-path`.

## Add features as progressive enhancements

Start with a component whose static state is already usable. Feature-detect the new APIs, then layer in motion and shaped decoration. Test reduced-motion preferences, interruption, nested transforms, focus visibility, and high-contrast modes. For dynamic themes, keep automated contrast checks rather than treating `contrast-color()` as an accessibility guarantee. Chrome 147 makes these primitives available in one engine; shipping them broadly still requires the project’s browser-support data and a fallback that preserves meaning.

## Source references

- <https://developer.chrome.com/blog/new-in-chrome-147>