Lzh on GitHub

border-radius

用于控制元素圆角的工具。

快速参考

Class（类别）Styles（样式）
rounded-xsborder-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-smborder-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-mdborder-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-lgborder-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-xlborder-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-2xlborder-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-3xlborder-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-4xlborder-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-noneborder-radius: 0;
rounded-fullborder-radius: calc(infinity * 1px);
rounded-(<custom-property>)border-radius: var(<custom-property>);
rounded-<value>border-radius: <value>;
rounded-s-xsborder-start-start-radius: var(--radius-xs); /* 0.125rem (2px) / border-end-start-radius: var(--radius-xs); / 0.125rem (2px) */
rounded-s-smborder-start-start-radius: var(--radius-sm); /* 0.25rem (4px) / border-end-start-radius: var(--radius-sm); / 0.25rem (4px) */
rounded-s-mdborder-start-start-radius: var(--radius-md); /* 0.375rem (6px) / border-end-start-radius: var(--radius-md); / 0.375rem (6px) */
rounded-s-lgborder-start-start-radius: var(--radius-lg); /* 0.5rem (8px) / border-end-start-radius: var(--radius-lg); / 0.5rem (8px) */
rounded-s-xlborder-start-start-radius: var(--radius-xl); /* 0.75rem (12px) / border-end-start-radius: var(--radius-xl); / 0.75rem (12px) */
rounded-s-2xlborder-start-start-radius: var(--radius-2xl); /* 1rem (16px) / border-end-start-radius: var(--radius-2xl); / 1rem (16px) */
rounded-s-3xlborder-start-start-radius: var(--radius-3xl); /* 1.5rem (24px) / border-end-start-radius: var(--radius-3xl); / 1.5rem (24px) */
rounded-s-4xlborder-start-start-radius: var(--radius-4xl); /* 2rem (32px) / border-end-start-radius: var(--radius-4xl); / 2rem (32px) */
rounded-s-noneborder-start-start-radius: 0; border-end-start-radius: 0;
rounded-s-fullborder-start-start-radius: calc(infinity * 1px); border-end-start-radius: calc(infinity * 1px);
rounded-s-(<custom-property>)border-start-start-radius: var(<custom-property>); border-end-start-radius: var(<custom-property>);
rounded-s-<value>border-start-start-radius: <value>; border-end-start-radius: <value>;
rounded-e-xsborder-start-end-radius: var(--radius-xs); /* 0.125rem (2px) / border-end-end-radius: var(--radius-xs); / 0.125rem (2px) */
rounded-e-smborder-start-end-radius: var(--radius-sm); /* 0.25rem (4px) / border-end-end-radius: var(--radius-sm); / 0.25rem (4px) */
rounded-e-mdborder-start-end-radius: var(--radius-md); /* 0.375rem (6px) / border-end-end-radius: var(--radius-md); / 0.375rem (6px) */
rounded-e-lgborder-start-end-radius: var(--radius-lg); /* 0.5rem (8px) / border-end-end-radius: var(--radius-lg); / 0.5rem (8px) */
rounded-e-xlborder-start-end-radius: var(--radius-xl); /* 0.75rem (12px) / border-end-end-radius: var(--radius-xl); / 0.75rem (12px) */
rounded-e-2xlborder-start-end-radius: var(--radius-2xl); /* 1rem (16px) / border-end-end-radius: var(--radius-2xl); / 1rem (16px) */
rounded-e-3xlborder-start-end-radius: var(--radius-3xl); /* 1.5rem (24px) / border-end-end-radius: var(--radius-3xl); / 1.5rem (24px) */
rounded-e-4xlborder-start-end-radius: var(--radius-4xl); /* 2rem (32px) / border-end-end-radius: var(--radius-4xl); / 2rem (32px) */
rounded-e-noneborder-start-end-radius: 0; border-end-end-radius: 0;
rounded-e-fullborder-start-end-radius: calc(infinity * 1px); border-end-end-radius: calc(infinity * 1px);
rounded-e-(<custom-property>)border-start-end-radius: var(<custom-property>); border-end-end-radius: var(<custom-property>);
rounded-e-<value>border-start-end-radius: <value>; border-end-end-radius: <value>;
rounded-t-xsborder-top-left-radius: var(--radius-xs); /* 0.125rem (2px) / border-top-right-radius: var(--radius-xs); / 0.125rem (2px) */
rounded-t-smborder-top-left-radius: var(--radius-sm); /* 0.25rem (4px) / border-top-right-radius: var(--radius-sm); / 0.25rem (4px) */
rounded-t-mdborder-top-left-radius: var(--radius-md); /* 0.375rem (6px) / border-top-right-radius: var(--radius-md); / 0.375rem (6px) */
rounded-t-lgborder-top-left-radius: var(--radius-lg); /* 0.5rem (8px) / border-top-right-radius: var(--radius-lg); / 0.5rem (8px) */
rounded-t-xlborder-top-left-radius: var(--radius-xl); /* 0.75rem (12px) / border-top-right-radius: var(--radius-xl); / 0.75rem (12px) */
rounded-t-2xlborder-top-left-radius: var(--radius-2xl); /* 1rem (16px) / border-top-right-radius: var(--radius-2xl); / 1rem (16px) */
rounded-t-3xlborder-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) / border-top-right-radius: var(--radius-3xl); / 1.5rem (24px) */
rounded-t-4xlborder-top-left-radius: var(--radius-4xl); /* 2rem (32px) / border-top-right-radius: var(--radius-4xl); / 2rem (32px) */
rounded-t-noneborder-top-left-radius: 0; border-top-right-radius: 0;
rounded-t-fullborder-top-left-radius: calc(infinity * 1px); border-top-right-radius: calc(infinity * 1px);
rounded-t-(<custom-property>)border-top-left-radius: var(<custom-property>); border-top-right-radius: var(<custom-property>);
rounded-t-<value>border-top-left-radius: <value>; border-top-right-radius: <value>;
rounded-r-xsborder-top-right-radius: var(--radius-xs); /* 0.125rem (2px) / border-bottom-right-radius: var(--radius-xs); / 0.125rem (2px) */
rounded-r-smborder-top-right-radius: var(--radius-sm); /* 0.25rem (4px) / border-bottom-right-radius: var(--radius-sm); / 0.25rem (4px) */
rounded-r-mdborder-top-right-radius: var(--radius-md); /* 0.375rem (6px) / border-bottom-right-radius: var(--radius-md); / 0.375rem (6px) */
rounded-r-lgborder-top-right-radius: var(--radius-lg); /* 0.5rem (8px) / border-bottom-right-radius: var(--radius-lg); / 0.5rem (8px) */
rounded-r-xlborder-top-right-radius: var(--radius-xl); /* 0.75rem (12px) / border-bottom-right-radius: var(--radius-xl); / 0.75rem (12px) */
rounded-r-2xlborder-top-right-radius: var(--radius-2xl); /* 1rem (16px) / border-bottom-right-radius: var(--radius-2xl); / 1rem (16px) */
rounded-r-3xlborder-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) / border-bottom-right-radius: var(--radius-3xl); / 1.5rem (24px) */
rounded-r-4xlborder-top-right-radius: var(--radius-4xl); /* 2rem (32px) / border-bottom-right-radius: var(--radius-4xl); / 2rem (32px) */
rounded-r-noneborder-top-right-radius: 0; border-bottom-right-radius: 0;
rounded-r-fullborder-top-right-radius: calc(infinity * 1px); border-bottom-right-radius: calc(infinity * 1px);
rounded-r-(<custom-property>)border-top-right-radius: var(<custom-property>); border-bottom-right-radius: var(<custom-property>);
rounded-r-<value>border-top-right-radius: <value>; border-bottom-right-radius: <value>;
rounded-b-xsborder-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) / border-bottom-left-radius: var(--radius-xs); / 0.125rem (2px) */
rounded-b-smborder-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) / border-bottom-left-radius: var(--radius-sm); / 0.25rem (4px) */
rounded-b-mdborder-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) / border-bottom-left-radius: var(--radius-md); / 0.375rem (6px) */
rounded-b-lgborder-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) / border-bottom-left-radius: var(--radius-lg); / 0.5rem (8px) */
rounded-b-xlborder-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) / border-bottom-left-radius: var(--radius-xl); / 0.75rem (12px) */
rounded-b-2xlborder-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) / border-bottom-left-radius: var(--radius-2xl); / 1rem (16px) */
rounded-b-3xlborder-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) / border-bottom-left-radius: var(--radius-3xl); / 1.5rem (24px) */
rounded-b-4xlborder-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) / border-bottom-left-radius: var(--radius-4xl); / 2rem (32px) */
rounded-b-noneborder-bottom-right-radius: 0; border-bottom-left-radius: 0;
rounded-b-fullborder-bottom-right-radius: calc(infinity * 1px); border-bottom-left-radius: calc(infinity * 1px);
rounded-b-(<custom-property>)border-bottom-right-radius: var(<custom-property>); border-bottom-left-radius: var(<custom-property>);
rounded-b-<value>border-bottom-right-radius: <value>; border-bottom-left-radius: <value>;
rounded-l-xsborder-top-left-radius: var(--radius-xs); /* 0.125rem (2px) / border-bottom-left-radius: var(--radius-xs); / 0.125rem (2px) */
rounded-l-smborder-top-left-radius: var(--radius-sm); /* 0.25rem (4px) / border-bottom-left-radius: var(--radius-sm); / 0.25rem (4px) */
rounded-l-mdborder-top-left-radius: var(--radius-md); /* 0.375rem (6px) / border-bottom-left-radius: var(--radius-md); / 0.375rem (6px) */
rounded-l-lgborder-top-left-radius: var(--radius-lg); /* 0.5rem (8px) / border-bottom-left-radius: var(--radius-lg); / 0.5rem (8px) */
rounded-l-xlborder-top-left-radius: var(--radius-xl); /* 0.75rem (12px) / border-bottom-left-radius: var(--radius-xl); / 0.75rem (12px) */
rounded-l-2xlborder-top-left-radius: var(--radius-2xl); /* 1rem (16px) / border-bottom-left-radius: var(--radius-2xl); / 1rem (16px) */
rounded-l-3xlborder-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) / border-bottom-left-radius: var(--radius-3xl); / 1.5rem (24px) */
rounded-l-4xlborder-top-left-radius: var(--radius-4xl); /* 2rem (32px) / border-bottom-left-radius: var(--radius-4xl); / 2rem (32px) */
rounded-l-noneborder-top-left-radius: 0; border-bottom-left-radius: 0;
rounded-l-fullborder-top-left-radius: calc(infinity * 1px); border-bottom-left-radius: calc(infinity * 1px);
rounded-l-(<custom-property>)border-top-left-radius: var(<custom-property>); border-bottom-left-radius: var(<custom-property>);
rounded-l-<value>border-top-left-radius: <value>; border-bottom-left-radius: <value>;
rounded-ss-xsborder-start-start-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-ss-smborder-start-start-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-ss-mdborder-start-start-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-ss-lgborder-start-start-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-ss-xlborder-start-start-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-ss-2xlborder-start-start-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-ss-3xlborder-start-start-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-ss-4xlborder-start-start-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-ss-noneborder-start-start-radius: 0;
rounded-ss-fullborder-start-start-radius: calc(infinity * 1px);
rounded-ss-(<custom-property>)border-start-start-radius: var(<custom-property>);
rounded-ss-<value>border-start-start-radius: <value>;
rounded-se-xsborder-start-end-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-se-smborder-start-end-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-se-mdborder-start-end-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-se-lgborder-start-end-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-se-xlborder-start-end-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-se-2xlborder-start-end-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-se-3xlborder-start-end-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-se-4xlborder-start-end-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-se-noneborder-start-end-radius: 0;
rounded-se-fullborder-start-end-radius: calc(infinity * 1px);
rounded-se-(<custom-property>)border-start-end-radius: var(<custom-property>);
rounded-se-<value>border-start-end-radius: <value>;
rounded-ee-xsborder-end-end-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-ee-smborder-end-end-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-ee-mdborder-end-end-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-ee-lgborder-end-end-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-ee-xlborder-end-end-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-ee-2xlborder-end-end-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-ee-3xlborder-end-end-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-ee-4xlborder-end-end-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-ee-noneborder-end-end-radius: 0;
rounded-ee-fullborder-end-end-radius: calc(infinity * 1px);
rounded-ee-(<custom-property>)border-end-end-radius: var(<custom-property>);
rounded-ee-<value>border-end-end-radius: <value>;
rounded-es-xsborder-end-start-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-es-smborder-end-start-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-es-mdborder-end-start-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-es-lgborder-end-start-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-es-xlborder-end-start-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-es-2xlborder-end-start-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-es-3xlborder-end-start-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-es-4xlborder-end-start-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-es-noneborder-end-start-radius: 0;
rounded-es-fullborder-end-start-radius: calc(infinity * 1px);
rounded-es-(<custom-property>)border-end-start-radius: var(<custom-property>);
rounded-es-<value>border-end-start-radius: <value>;
rounded-tl-xsborder-top-left-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-tl-smborder-top-left-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-tl-mdborder-top-left-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-tl-lgborder-top-left-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-tl-xlborder-top-left-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-tl-2xlborder-top-left-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-tl-3xlborder-top-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-tl-4xlborder-top-left-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-tl-noneborder-top-left-radius: 0;
rounded-tl-fullborder-top-left-radius: calc(infinity * 1px);
rounded-tl-(<custom-property>)border-top-left-radius: var(<custom-property>);
rounded-tl-<value>border-top-left-radius: <value>;
rounded-tr-xsborder-top-right-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-tr-smborder-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-tr-mdborder-top-right-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-tr-lgborder-top-right-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-tr-xlborder-top-right-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-tr-2xlborder-top-right-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-tr-3xlborder-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-tr-4xlborder-top-right-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-tr-noneborder-top-right-radius: 0;
rounded-tr-fullborder-top-right-radius: calc(infinity * 1px);
rounded-tr-(<custom-property>)border-top-right-radius: var(<custom-property>);
rounded-tr-<value>border-top-right-radius: <value>;
rounded-br-xsborder-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-br-smborder-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-br-mdborder-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-br-lgborder-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-br-xlborder-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-br-2xlborder-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-br-3xlborder-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-br-4xlborder-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-br-noneborder-bottom-right-radius: 0;
rounded-br-fullborder-bottom-right-radius: calc(infinity * 1px);
rounded-br-(<custom-property>)border-bottom-right-radius: var(<custom-property>);
rounded-br-<value>border-bottom-right-radius: <value>;
rounded-bl-xsborder-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-bl-smborder-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-bl-mdborder-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-bl-lgborder-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */
rounded-bl-xlborder-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-bl-2xlborder-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-bl-3xlborder-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-bl-4xlborder-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */
rounded-bl-noneborder-bottom-left-radius: 0;
rounded-bl-fullborder-bottom-left-radius: calc(infinity * 1px);
rounded-bl-(<custom-property>)border-bottom-left-radius: var(<custom-property>);
rounded-bl-<value>border-bottom-left-radius: <value>;

示例

基本示例

使用 rounded-sm 和 rounded-md 等工具为元素应用不同大小的圆角：

rounded-sm

rounded-md

rounded-lg

rounded-xl

<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 等工具只对元素的一侧进行圆角处理：

rounded-t-lg

rounded-r-lg

rounded-b-lg

rounded-l-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 等工具只对元素的某个角进行圆角处理：

rounded-tl-lg

rounded-tr-lg

rounded-br-lg

rounded-bl-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 等工具使用逻辑属性设置圆角，这些属性根据文本方向映射到相应的角：

Left-to-right

Right-to-left

<div dir="ltr">
  <div class="rounded-s-lg ..."></div>
</div>
<div dir="rtl">
  <div class="rounded-s-lg ..."></div>
</div>

以下是所有可用的圆角逻辑属性工具及其在 LTR 和 RTL 模式下的物理属性等效项。

Class（类别）Left-to-right（左到右）Right-to-left（右到左）
rounded-s-*rounded-l-*rounded-r-*
rounded-e-*rounded-r-*rounded-l-*
rounded-ss-*rounded-tl-*rounded-tr-*
rounded-se-*rounded-tr-*rounded-tl-*
rounded-es-*rounded-bl-*rounded-br-*
rounded-ee-*rounded-br-*rounded-bl-*

如需更多控制，您还可以使用 LTR 和 RTL 修饰符 来根据当前文本方向有条件地应用特定样式。

创建药丸按钮

使用 rounded-full 工具创建药丸按钮：

rounded-full

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

移除圆角

使用 rounded-none 工具从元素中移除现有的圆角：

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() 函数。

响应式设计

在圆角工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：

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

在 变体文档 中了解更多关于使用变体的信息。

自定义主题

使用 --radius-* 主题变量来自定义项目中的 圆角 工具：

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

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

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

在 主题文档 中了解更多关于自定义主题的信息。