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

现在 rounded-5xl 实用工具类可以在您的标记中使用

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

了解更多关于在 主题文档.