1. 边框
  2. border-radius

边框

border-radius

用于控制元素边框半径的实用工具。

样式
rounded-xs
border-radius: var(--radius-xs); /* 0.125rem (2px) */
rounded-sm
border-radius: var(--radius-sm); /* 0.25rem (4px) */
rounded-md
border-radius: var(--radius-md); /* 0.375rem (6px) */
rounded-lg
border-radius: var(--radius-lg); /* 0.75rem (8px) */
rounded-xl
border-radius: var(--radius-xl); /* 0.75rem (12px) */
rounded-2xl
border-radius: var(--radius-2xl); /* 1rem (16px) */
rounded-3xl
border-radius: var(--radius-3xl); /* 1.5rem (24px) */
rounded-none
border-radius: 0;
rounded-full
border-radius: calc(infinity * 1px);
rounded-(<custom-property>)
border-radius: var(<custom-property>);

示例

基本示例

使用诸如 rounded-smrounded-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-mdrounded-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-mdrounded-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-mdrounded-se-xl 等工具类,使用逻辑属性设置边框半径,这些属性会根据文本方向映射到适当的角

从左到右

从右到左

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

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

从左到右从右到左
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-[<值>] 语法 来设置边框半径基于完全自定义的值

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

对于 CSS 变量,您还可以使用 rounded-(<自定义属性>) 语法

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

这只是 rounded-[var(<自定义属性>)] 的简写形式,会自动为您添加 var() 函数。

响应式设计

前缀一个 border-radius 工具类 带有诸如 md: 等断点变体,仅在中等 屏幕尺寸及以上应用该工具类

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

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

自定义您的主题

使用 --radius-* 主题变量自定义项目中的边框半径 工具类

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

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

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

主题文档

中了解有关自定义主题的更多信息 .

Copyright © 2025 Tailwind Labs Inc.·商标政策