边框半径

示例

基本示例

使用诸如 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 ...">保存更改</button>

移除边框半径

使用 rounded-none 工具从元素中移除现有的边框半径：

<button class="rounded-none ...">保存更改</button>

使用自定义值

Use the rounded-[<value>] syntax to set the 边框半径 based on a completely custom value:

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

For CSS variables, you can also use the rounded-(<custom-property>) syntax:

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

This is just a shorthand for rounded-[var(<custom-property>)] that adds the var() function for you automatically.

响应式设计

Prefix a border-radius utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

自定义主题

Use the --radius-* theme variables to customize the 边框半径 utilities in your project:

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

Now the rounded-5xl utility can be used in your markup:

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

Learn more about customizing your theme in the theme documentation.