border-radius

範例（Examples）

基本範例（Basic example）

使用 rounded-sm 和 rounded-md 等通用類別為元素套用不同的圓角大小：

<div class="rounded-sm ..."></div><div class="rounded-md ..."></div><div class="rounded-lg ..."></div><div class="rounded-xl ..."></div>

分別設定各邊圓角（Rounding sides separately）

使用 rounded-t-md 和 rounded-r-lg 等通用類別僅對元素的一邊進行圓角處理：

<div class="rounded-t-lg ..."></div><div class="rounded-r-lg ..."></div><div class="rounded-b-lg ..."></div><div class="rounded-l-lg ..."></div>

分別設定各角圓角（Rounding corners separately）

使用 rounded-tr-md 和 rounded-tl-lg 等通用類別僅對元素的一個角進行圓角處理：

<div class="rounded-tl-lg ..."></div><div class="rounded-tr-lg ..."></div><div class="rounded-br-lg ..."></div><div class="rounded-bl-lg ..."></div>

使用邏輯屬性（Using logical properties）

使用 rounded-s-md 和 rounded-se-xl 等通用類別透過邏輯屬性設定圓角，這些屬性會根據文字方向對應到適當的角：

<div dir="ltr">  <div class="rounded-s-lg ..."></div></div><div dir="rtl">  <div class="rounded-s-lg ..."></div></div>

以下是所有可用的圓角邏輯屬性通用類別，以及它們在 LTR 和 RTL 模式下對應的物理屬性。

如需更多控制，你也可以使用 LTR 和 RTL 修飾符根據當前文字方向有條件地套用特定樣式。

建立膠囊按鈕（Creating pill buttons）

使用 rounded-full 通用類別建立膠囊按鈕：

<button class="rounded-full ...">Save Changes</button>

移除圓角（Removing the border radius）

使用 rounded-none 通用類別從元素移除現有的圓角：

<button class="rounded-none ...">Save Changes</button>

使用自訂值（Using a custom value）

使用 rounded-[<value>] 語法，根據完全自訂的值來設定 border radius：

<div class="rounded-[2vw] ...">  <!-- ... --></div>

對於 CSS 變數，你也可以使用 rounded-(<custom-property>) 語法：

<div class="rounded-(--my-radius) ...">  <!-- ... --></div>

這只是 rounded-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。

響應式設計（Responsive design）

在 border-radius 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

<div class="rounded md:rounded-lg ...">  <!-- ... --></div>

在變體文件中了解更多關於使用變體的資訊。

自訂你的主題（Customizing your theme）

使用 --radius-* 主題變數來自訂專案中的 border radius 通用類別：

@theme {  --radius-5xl: 3rem; }

現在可以在標記中使用 rounded-5xl 通用類別：

<div class="rounded-5xl">  <!-- ... --></div>

在主題文件中了解更多關於自訂主題的資訊。