これは便利！ボーダーをあらゆる形状にできるborder-shapeプロパティをサポート、Chrome 147で新しく追加された4個のCSSの機能

Post on:2026年4月13日

はじめに

4/7にリリースされたChrome 147で4つのCSSとUIに関する新しい機能が追加されました。対象となるChrome 147は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。

以下、その4つの新しいCSSとUIに関する機能を紹介します。

タイムラインの名前付き範囲スクロール

タイムラインの名前付き範囲スクロールとは、ViewTimelinesの名前付き範囲セットを拡張し、スクロール範囲を追加します。

Scroll-Driven Animations APIではViewTimelinesとともに、アニメーションの範囲を定義するViewTimelineの一部を参照する名前付き範囲が導入されました。

しかし、提供されている名前付き範囲のすべては、対象が表示されているViewTimelineの部分に限定されていました。デベロッパーにとってはタイムラインのベースとなるスクロールコンテナ全体を参照できると便利です。この機能により既存の名前付き範囲セット（entry, exit, cover, contain）にスクロールの名前付き範囲を追加します。

CSSのcontrast-color()関数

CSSのcontrast-color()関数を使用すると、アクセシビリティのためのコントラスト要件を満たすことができます。

contrast-color()関数は、CSS内で色値が必要とされる場所であればどこでも使用できます。この関数は色値の引数を受け取り、その引数の色に対してコントラストのもっとも高いブラック（またはホワイト）を返します。

contrast-color()をメディアクエリと組み合わせることで、ライトモードとダークモードの両方で読みやすいテキストを自動的に取得できます。

:root {
  --bg: #eee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #222;
  }
}

body {
  background-color: var(--bg);
  color: contrast-color(var(--bg));
}

:root {

--bg: #eee;

}

@media (prefers-color-scheme: dark) {

:root {

--bg: #222;

}

body {

background-color: var(--bg);

color: contrast-color(var(--bg));

}

contrast-color()でどういうことができるのかは下記をご覧ください。

Automated accessible text with contrast-color()

CSSのborder-shapeプロパティ

CSSのborder-shapeプロパティを使用すると、ボーダーに任意の形状（多角形・円など）を設定できます。

border-shapeプロパティはclip-pathと同じ形状を作成できますが、その仕組みは根本的に異なります。border-shapeはボーダーの形状を設定し、装飾を施し、内側のみをクリップします。

border-shapeには、2つのバリエーションがあります。1つは形状を縁取るタイプで、もう1つは二つの形状の間を塗りつぶすタイプです。

border-shapeを使用すると、clip-pathのマスクとは異なり、ボックス自体を再定義するため、その新しい形状に沿って背景や境界線などがすべてが従います。

See the Pen
border-shape chevron nav styled by coliss (@coliss)
on CodePen.

また、corner-shapeを使用しても同様にさまざまな形を作成できます。

See the Pen
corner-shapeで実装した矢印型ナビゲーション by coliss (@coliss)
on CodePen.

border-shape()でどういうことができるのかは下記をご覧ください。

border-shape: the future of the non-rectangular web

widthプロパティとstyleプロパティの分離

Chrome 147+では、border-width, outline-width, column-rule-widthの各プロパティの動作に関してアップデートされたCSSの仕様に準拠しました。これまではborder-style, outline-style, column-rule-styleにnoneまたはhiddenが設定されている場合、これらのプロパティの計算された幅は設定された値に関係なく0pxに強制されていました。

今回の変更により、border-width, outline-width, column-rule-widthの計算値は、*-styleプロパティとは関係なく、常にデベロッパーが設定した値を反映するようになります。さらに、outline-widthおよびcolumn-rule-widthの解決値（getComputedStyle()によって返される値）も、設定された値を反映するようになります。

この変更により、Chromeはすでにこの仕様を実装しているFirefoxおよびWebkitと同様の挙動になります。