border-radius

範例

基本範例

使用像是 rounded-sm 和 rounded-md 的工具類別來對元素套用不同的邊框圓角尺寸

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

分別為各邊設定圓角

使用像是 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>

分別為各角設定圓角

使用像是 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>

使用邏輯屬性

使用像是 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 修飾符，以根據目前的文字方向有條件地套用特定的樣式。

建立膠囊按鈕

使用 rounded-full 工具類別來建立膠囊按鈕

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

移除邊框圓角

使用 rounded-none 工具類別來移除元素現有的邊框圓角

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

使用自定義值

使用 rounded-[<value>] 語法 來設定邊框圓角基於完全自定義的值

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

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

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

這只是 rounded-[var(<custom-property>)] 的簡寫，它會自動為您新增 var() 函數。

響應式設計

前綴一個 border-radius 工具類別 與一個斷點變體，例如 md:，以便僅在中 螢幕尺寸及以上套用該工具類別

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

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

自定義您的主題

使用 --radius-* 主題變數來自定義您專案中的邊框圓角 工具類別

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

現在 5xl 工具類別可以在您的標記中使用 rounded-5xl utility can be used in your markup

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

在 主題文件.