圓角

類別

完全圓角使用固定的 pill utility，而不是圓角 token；它只會設定 border-radius: calc(infinity * 1px)。

值

八個預設圓角值都是 rem 長度。像素換算假設根元素字型大小為 16px。圓角只改變角落形狀，不會設定盒子的尺寸。

圓角與裁切互相獨立

r-4xl 讓父元素的背景與邊框呈現圓角，不會為子元素設定相同圓角，也不會自動裁切子元素的繪製區域。若父元素應沿著圓角邊緣裁切內容，請加入 overflow-hidden。

兩個父元素都使用 r-4xl 與相同內容，只有右側父元素加入 overflow-hidden。藍色用來識別子表面，虛線輪廓則標示父元素的圓角邊緣。

文字說明

1. 兩個父盒子都使用 r-4xl，其預設值為 2rem。兩者包含相同的子元素與父元素內容區域，尺寸由相同內容決定。
2. 左側父元素保留預設的可見溢位。它自己的背景有圓角，但藍色子元素仍在頂端繪製長方形。
3. 右側父元素加入 overflow-hidden，將同一個子長方形沿父元素的圓角邊緣裁切；子元素並沒有繼承圓角值。
4. 虛線輪廓是檢查用標註，不是 r-4xl 輸出的邊框。色彩只用來在兩個範例中識別同一個子元素。

rtl- 這類實體家族永遠指向左上角。rss- 這類邏輯家族依循區塊起點與行內起點，因此對應的實體角落取決於書寫模式與方向。上方列出了所有對應關係。

相鄰曲線可能重疊時，瀏覽器會縮小過大的圓角值。因此 pill 套用在寬盒子上會形成膠囊形，在正方形上則形成圓形；它不會讓元素變成正方形。

需要直角時，請使用直接值函式 r(0)，或對應單一角落的形式，例如 rtl(0)。預設集沒有 --radius-none token，也不接受 -r-md 這類負值 token 形式。

另見 原生圓角裁切與直接值.

用法

從底板到其中的縮圖，逐步縮小圓角。

<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)  }}

自訂

修改預設值或新增 token：--radius-card 會建立 r-card 與各個單角 class。

@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)  }}

另見 主題指令與色彩.