边框圆角

示例

基本示例

使用 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.