角丸

クラス

完全に丸めるには、角丸トークンではなく固定の pill ユーティリティを使います。設定するのは border-radius: calc(infinity * 1px) だけです。

値

8 個のプリセット値は rem 単位の長さです。ピクセル換算はルートのフォントサイズを 16px と仮定しています。角丸は角の形状を変えるもので、ボックスの寸法は設定しません。

角丸と切り取りは別の指定

r-4xl は親要素の背景とボーダーを丸めます。子要素に同じ角丸を設定したり、その描画を自動で切り取ったりはしません。親の丸い縁に沿って内容を切り取るには、overflow-hidden を追加します。

両方の親は r-4xl と同じ内容を使い、右の親だけが overflow-hidden を加えています。青は子サーフェスを識別する色で、破線の輪郭は親の丸い縁を示します。

テキストによる説明

1. 両方の親ボックスは、プリセット値が 2rem の r-4xl を使います。子要素と親の内容領域は同じで、寸法は同じ内容に従います。
2. 左の親は、既定の可視オーバーフローを保っています。自身の背景は丸くなりますが、青い子は上部に長方形として描かれます。
3. 右の親は overflow-hidden を加えています。同じ子の長方形が親の丸い縁に沿って切り取られます。子が角丸を継承したわけではありません。
4. 破線の輪郭は確認用の注記であり、r-4xl が出力するボーダーではありません。色は、両方の例で同じ子要素を識別するためだけに使っています。

rtl- のような物理ファミリーは、常に左上の角を指定します。rss- のような論理ファミリーは block-start と inline-start に従うため、対応する物理的な角は書字モードと方向で変わります。対応関係は上にすべて載っています。

隣り合う曲線が重なる場合、ブラウザーは大きすぎる半径を縮小します。このため pill は横長のボックスではカプセル形に、正方形では円になります。要素を正方形にする指定ではありません。

角を直角にするには、値を直接受け取る r(0)、または rtl(0) のように個別の角に対応する関数を使います。プリセットには --radius-none トークンはありません。-r-md のような負のトークン形式も拒否されます。

関連項目： ネイティブの角丸による切り取り、値の直接指定.

使用例

外側のシートから内側のサムネイルへ、角丸を段階的に小さくします。

<div class="… r-lg">  <div class="… r-md">FN</div>  <div>    <p>Field notes</p>    <p>Every Friday</p>  </div>  <span class="… pill">Weekly</span></div>

@layer theme {  :root,  :host {    --radius-md: .375rem;    --radius-lg: .5rem  }}@layer utilities {  .r-lg {    border-radius: var(--radius-lg)  }  .r-md {    border-radius: var(--radius-md)  }  .pill {    border-radius: calc(infinity * 1px)  }}

カスタマイズ

プリセット値を変更したり、トークンを追加したりできます。--radius-card を定義すると、r-card と各角のクラスが使えるようになります。

@theme {  --radius-md: .5rem;  --radius-card: 1.25rem;}

@layer theme {  :root,  :host {    --radius-card: 1.25rem  }}@layer utilities {  .r-card {    border-radius: var(--radius-card)  }}

関連項目： テーマのディレクティブ、色.