概要
CSSのcorner-shape: squircleプロパティをTailwind CSSで活用し、ブラウザ間で統一された見た目を実現する方法を紹介します。
squircleは通常の角丸よりも洗練された印象を与えますが、同じradius値でも通常の角丸とは見た目が異なるため、適切な調整が必要です。
squircleとは
squircle（スクワークル）は、正方形（square）と円（circle）の中間的な形状で、角丸の曲線がより滑らかで自然な印象を与えます。
iOSアイコンなどで採用されており、時折SNSのデザイン界隈で話題になっています。
CSSではcorner-shapeプロパティを使って実現できます。
ブラウザ対応状況
2025年12月現在、corner-shapeプロパティはChromeとEdgeでのみ対応しており、FirefoxやSafariなどは未対応です。
ただし、プログレッシブエンハンスメントの考え方で実装すれば問題ありません。
対応ブラウザではより洗練された見た目を提供し、未対応ブラウザでは通常の角丸で表示されます。
こうしたブラウザ対応状況の違いがあるため、対応ブラウザと未対応ブラウザで「同じ見た目」を維持するには、単にsquircleを適用するだけでなく、radius値の調整が必要になります。
通常の角丸との違い
同じradius値を設定しても、通常の角丸とsquircleでは印象が異なります。
| 通常の角丸 | 調整前squircle |
|---|---|
 |
 |
上の画像を比較すると、squircleを適用した方が角が鋭く見えることが分かります。
特にrounded-xl以上の大きな角丸では、通常の角丸に比べて明らかに角のカーブが浅くなっています。
このように、単純にcorner-shape: squircleを追加するだけでは印象が大きく変わってしまうため、通常の角丸と揃えるためにはradius値の調整が必要です。
Tailwind CSSでの実装方法
Tailwind CSSのエントリーポイントのCSSファイル（通常はapp.cssやglobals.cssなど）に以下のコードを追加します。
@layer utilities {
@supports (corner-shape: squircle) {
/* すべてのroundedクラスにsquircleを適用 */
[class*="rounded-"] {
corner-shape: squircle;
}
/* 大きなradiusは個別に調整 */
[class*="rounded-3xl"] {
corner-shape: superellipse(1.75);
}
[class*="rounded-4xl"] {
corner-shape: superellipse(1.5);
}
/* squircle適用時のradius値を調整 */
:root {
--radius-xs: 0.15rem;
--radius-sm: 0.3rem;
--radius-md: 0.6rem;
--radius-lg: 1.0rem;
--radius-xl: 1.5rem;
--radius-2xl: 2rem;
--radius-3xl: 2.5rem;
--radius-4xl: 3rem;
}
}
}
コードの解説
-
@layer utilitiesでTailwindのユーティリティレイヤーにスタイルを追加 -
@supports (corner-shape: squircle)でブラウザ対応を検出 -
[class*="rounded-"]でrounded-を含むすべてのクラスにsquircleを適用-
rounded-fullやrounded-noneにも適用されますが、これらは問題なく動作します - より厳密に制御したい場合は、セレクタを個別に指定することも可能です
-
-
rounded-3xlとrounded-4xlにはsuperellipse()で微調整 -
:rootでCSS変数--radius-*の値を調整
なぜ:rootを使うのか
Tailwind CSS v4では通常、デザイントークンを定義する際は@themeを使用します。
しかし今回は、@supportsの条件分岐の中で値を上書きする必要があるため、:rootを使用しています。
@themeはトップレベルでのみ定義可能で、@supportsや@mediaなどの中にネストできません。
一方、:rootは通常のCSSセレクタなので、条件分岐の中で使用できます。
今回のケースでは、既存の--radius-*変数を条件付きで上書きするだけなので、:rootの使用に問題はありません。
新しいユーティリティクラスを生成する必要がないため、@themeを使う必要がない、ということです。
詳細はTailwind CSSの公式ドキュメントを参照してください。
radius値の調整
squircleを適用すると角が鋭く見えるため、印象を揃えるためには元の値よりも大きめに設定する必要があります。
以下は調整前後の比較です。
| Tailwind CSSのデフォルト値 | squircle用の調整値 | 倍率 | |
|---|---|---|---|
--radius-xs |
0.125rem |
0.15rem |
1.25倍 |
--radius-sm |
0.25rem |
0.3rem |
1.2倍 |
--radius-md |
0.375rem |
0.6rem |
1.6倍 |
--radius-lg |
0.5rem |
1.0rem |
2倍 |
--radius-xl |
0.75rem |
1.5rem |
2倍 |
--radius-2xl |
1rem |
2rem |
2倍 |
--radius-3xl |
1.5rem |
2.5rem |
1.67倍 |
--radius-4xl |
2rem |
3rem |
1.5倍 |
rounded-xsとrounded-smは約1.2倍の控えめな調整です。
小さな角丸ではsquircleの効果が視覚的に微妙なため、大幅な変更は不要です。
rounded-mdからrounded-2xlにかけては、約1.6倍から2倍に値を大きくしています。
特にrounded-lg以上では2倍を基準にしており、これによって通常の角丸と近い見た目を実現できます。
一方でrounded-3xlとrounded-4xlは、後述するsuperellipse()による微調整があるため、倍率を抑えています。
なお、これらの値は目視で調整したもので、特定の計算式に基づくものではありません。
調整の際は以下の手順で行いました。
- 通常の角丸とsquircleを並べて表示
- 各サイズで視覚的な印象が近くなるようradius値を増減
- 複数のサイズを同時に確認し、全体のバランスを調整
プロジェクトごとにデザインの要求が異なるため、この値を基準に微調整することをおすすめします。
superellipse()による微調整
rounded-3xlとrounded-4xlでは、squircleでなくsuperellipse()関数で細かく調整しています。
[class*="rounded-3xl"] {
corner-shape: superellipse(1.75);
}
[class*="rounded-4xl"] {
corner-shape: superellipse(1.5);
}
squircleはsuperellipse(2)と同等です。
superellipse()は角の曲線をより細かく制御できる関数で、パラメータによって以下のように形状が変化します。
-
superellipse(1): 完全な円形の角丸（corner-shape: roundと同等） -
superellipse(2): squircle（corner-shape: squircleと同等） - パラメータが大きくなるほど角が鋭くなり、無限大では通常の角になる
つまり、パラメータが小さいほど角が丸く、大きいほど角が鋭くなります。
大きめのradiusではこういった細かい調整も必要でした。
適用結果
上記の調整により、通常の角丸とsquircleとの印象をそれなり以上には揃えることができました。
| 通常の角丸 | 調整後squircle |
|---|---|
|
 |
実装上の注意点
対象バージョン
この実装はTailwind CSS v4以降を想定しています。
v4ではコンフィグがCSSベースになったため、:rootでCSS変数を直接上書きできます。
全体への影響
既存のrounded-クラスをすべて上書きするため、プロジェクト全体に影響します。
特定のコンポーネントのみに適用したい場合は、セレクタを調整してください。
例:
/* 特定のコンポーネントのみ */
.my-component [class*="rounded-"] {
corner-shape: squircle;
}
ブラウザ対応
未対応ブラウザでは通常の角丸として表示されます。
@supportsにより、JavaScriptでのポリフィルなどは不要です。
カスタム値の扱い
カスタムradius値（例: rounded-[12px]）を使用している場合、この実装では調整されません。
頻繁に使用するカスタム値がある場合は個別に定義することをおすすめします。
まとめ
CSSのcorner-shape: squircleをTailwind CSSで活用する方法を紹介しました。
-
@supportsを使ってプログレッシブエンハンスメントを実現 - squircle適用時はradius値を大きめに調整
- 大きめのradiusには
superellipse()で微調整 - 既存のTailwindクラスをそのまま使える
この実装により、対応ブラウザでより洗練された見た目を提供しつつ、未対応ブラウザでも問題なく表示されるデザインが実現できます。