border-radius

示例(Examples)

基本示例(Basic example)

使用像 rounded-sm 和 rounded-md 这样的工具为元素应用不同的边框圆角大小：

🌐 Use utilities like rounded-sm and rounded-md to apply different border radius sizes to an element:

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

分别圆边(Rounding sides separately)

使用诸如 rounded-t-md 和 rounded-r-lg 之类的工具仅对元素的一侧进行圆角处理：

🌐 Use utilities like rounded-t-md and rounded-r-lg to only round one side of an element:

<div class="rounded-t-lg ..."></div><div class="rounded-r-lg ..."></div><div class="rounded-b-lg ..."></div><div class="rounded-l-lg ..."></div>

分别圆角(Rounding corners separately)

使用像 rounded-tr-md 和 rounded-tl-lg 这样的工具只圆化元素的一个角：

🌐 Use utilities like rounded-tr-md and rounded-tl-lg utilities to only round one corner of an element:

<div class="rounded-tl-lg ..."></div><div class="rounded-tr-lg ..."></div><div class="rounded-br-lg ..."></div><div class="rounded-bl-lg ..."></div>

使用逻辑属性(Using logical properties)

使用像 rounded-s-md 和 rounded-se-xl 这样的工具，通过 逻辑属性 设置边框半径，这些属性会根据文本方向映射到相应的角落：

🌐 Use utilities like rounded-s-md and rounded-se-xl to set the border radius using logical properties, which map to the appropriate corners based on the text direction:

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

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

🌐 Here are all the available border radius logical property utilities and their physical property equivalents in both LTR and RTL modes.

为了获得更多的控制，你还可以使用 LTR 和 RTL 修改器 根据当前的文本方向有条件地应用特定样式。

🌐 For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.

创建药丸按钮(Creating pill buttons)

使用 rounded-full 工具创建胶囊按钮：

🌐 Use the rounded-full utility to create pill buttons:

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

删除边框半径(Removing the border radius)

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

🌐 Use the rounded-none utility to remove an existing border radius from an element:

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

使用自定义值(Using a custom value)

使用 rounded-[<value>] 语法 根据完全自定义的值设置 border radius：

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

对于 CSS 变量，还可以使用 rounded-(<custom-property>) 语法：

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

这只是简写，用于 rounded-[var(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计(Responsive design)

在 border-radius 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

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

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

现在 rounded-5xl 工具可用于你的标记：

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

在此详细了解如何自定义主题： 主题文档。