边框圆角

示例

基础示例

使用功能类来设置元素的边框圆角：

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

分别设置边的圆角

使用 rounded-{t|r|b|l}{-size?} 功能类来分别设置元素每一边的圆角：

<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-{tl|tr|br|bl}{-size?} 功能类来分别设置元素每个角的圆角：

<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|e}{-size?} 和 rounded-{ss|se|ee|es}{-size?} 功能类来分别设置相对于书写方向的边框圆角：

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

使用自定义值

Use the rounded-[<value>] syntax to set the border radius 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 border radius 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.