角丸はborder-radius、高さのアニメーションは固定値から固定値へ。このあたりは長く「CSSではここまで」と割り切ってきた部分でした。
その制限を少し崩しているのが、corner-shapeとinterpolate-sizeです。corner-shapeは角の形そのものを変え、interpolate-sizeはautoのような内容から決まるキーワードをトランジションへ使えるようにします。
ただし、2026年9月時点ではどちらもMDNでLimited availabilityかつexperimentalです。使うなら、未対応ブラウザでも壊れないことを前提にします。
先に、2つの対応状況を見ておく
2026年9月15日に確認した安定版の対応開始は次のとおりです。
| 機能 | Chrome・Edge | Firefox | Safari安定版 |
|---|---|---|---|
| corner-shape | 139以降 | 未対応 | 未対応 |
| interpolate-size | 129以降 | 未対応 | 未対応 |
corner-shapeにはSafariのプレビュー版の情報がありますが、安定版の対応には数えていません。正式な対応と、プレビューや試験実装は分けて見ます。
corner-shapeで「丸い」以外の角を作る
corner-shapeは、border-radiusで作った角の輪郭を変えるプロパティです。squircle、scoop、bevel、notchなどのキーワードを使えます。squircleなら、円弧の角丸より四角さを残した、なめらかな形になります。
.card {
border-radius: 2rem;
corner-shape: squircle;
}ここで重要なのがborder-radiusです。corner-shapeだけを書いても、角を作る半径がなければ効果は出ません。border-radiusが0のままなら、corner-shapeは効きません。
たとえばボタンやカードを、一般的な角丸より少し連続的なスクワークルにしたいときに使えます。画像で形を作ったり、複雑なクリップパスを用意したりせず、角の表現をCSSの値として持てるのが面白いところです。
Chromeでは139でcorner-shapeが提供されました。WebKitでは2026年8月のSafari Technology Preview 251で対応が追加されていますが、安定版Safariでの正式提供は確認できませんでした。本番では未対応の環境を前提にしておきます。
未対応ブラウザは未知のプロパティを無視するため、上の例なら通常のborder-radiusがそのままフォールバックになります。
interpolate-sizeでheight: autoへトランジションする
これまで、height: 0からheight: autoへは普通のtransitionで補間できませんでした。autoは内容から決まるintrinsic size keywordで、固定長と同じように途中の値を計算できなかったためです。
interpolate-size: allow-keywordsを指定すると、長さ・パーセンテージ値と、一部のintrinsic size keywordの間を補間できるようになります。
:root {
interpolate-size: allow-keywords;
}
.panel {
height: 0;
overflow: clip;
transition: height 0.3s ease;
}
.panel.is-open {
height: auto;
}指定は:rootへ置くのが基本です。interpolate-sizeは継承するため、ページ内の対象へまとめて許可できます。
注意したいのは、auto同士など「intrinsic keywordからintrinsic keyword」へ何でも補間できる機能ではないことです。少なくとも片側は長さまたはパーセンテージである必要があります。
detailsのアコーディオンなら、開く動きから段階的に足せる
Chromeの公式解説では、<details>を使った例も紹介されています。まずは@supportsの内側だけで有効にすると、未対応ブラウザでは普通の開閉へ戻せます。
@supports (interpolate-size: allow-keywords) {
:root {
interpolate-size: allow-keywords;
}
details {
height: 3rem;
overflow: clip;
transition: height 0.3s ease;
}
details[open] {
height: auto;
}
}この最小構成では、<details>を開く方向の変化を試せます。開閉の両方向をきれいにアニメーションさせるには::details-contentなど別の仕組みも関係し、そちらのブラウザ対応も考える必要があります。
同じグループで1つだけ開くアコーディオンにしたいなら、name属性を使う方法を1つ開くとほかが閉じるアコーディオンで書きました。動きを足すのは、その形ができてからでも遅くありません。
interpolate-size自体はChrome・Edge 129以降で提供されています。WebKitの実装は、2026年3月時点の公式のバグトラッカーでも未完了のままで、Limited availabilityが続いています。
@supportsで「あるときだけ見た目を足す」
この2機能は、どちらもUIの土台そのものにしないほうが扱いやすくなります。
corner-shapeなら未対応時は普通の角丸、interpolate-sizeならアニメーションなしで開閉できる状態を残します。必要なら@supportsで明示的に分けます。
@supports (corner-shape: squircle) {
.card {
corner-shape: squircle;
}
}
@supports (interpolate-size: allow-keywords) {
:root {
interpolate-size: allow-keywords;
}
}動きを付ける場合は、prefers-reduced-motionも一緒に考えます。
@media (prefers-reduced-motion: reduce) {
.panel,
details {
transition: none;
}
}ここで気をつけたいのが、height: 0のような「閉じた状態」の指定です。閉じた高さだけを全環境へ書き、開くためのautoを対応環境にだけ足すと、未対応のブラウザで内容が読めない状態になりかねません。アニメーションを省略することと、本文を隠したままにすることは分けて考えます。
@supportsが確認するのは、その宣言やセレクタをブラウザが解釈できるかどうかです。組み合わせた動作まで保証するものではないので、Chromeで動いたら終わりにはしません。Safari・Firefoxでも、少なくとも内容が開いて読めることは確かめます。
見た目が少し良くなる機能ほど、未対応で内容が消えない設計にしておくと試しやすくなりますよね！
