边框圆角

圆角

使用 .rounded-sm, .rounded, 或 .rounded-lg 等实用功能类来应用不同的边框半径大小到一个元素上。

药丸形💊和圆圈

使用 rounded-full 功能类来创建药丸形💊和圆圈。

无圆角

使用 rounded-none 从元素中删除现有的边框半径。

这最常见的是用来删除一个应用在较小断点上的边框半径。

独立设置每条边框的圆角效果

使用 rounded-{t|r|b|l}{size?} 只将圆角应用到元素的一个边框上。

独立设置每个边角的圆角效果

使用 rounded-{tl|tr|br|bl}{-size?} 只将圆角应用到元素的一个边角上。

响应式

要在特定的断点处控制元素的边界半径，请在任何现有的边界半径功能类中添加 {screen}: 前缀。例如，使用 md:rounded-lg 来应用 rounded-lg 功能类，只适用于中等尺寸以上的屏幕。

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

关于 Tailwind 的响应式设计功能的更多信息，请查看响应式设计文档。

自定义

边框半径

默认情况下，Tailwind 提供了五个边框半径大小的功能类，您可以通过编辑 theme.borderRadius 部分来改变，添加或删除这些功能类。您可以通过编辑 Tailwind 配置中的 theme.borderRadius 部分来改变，添加或删除这些功能类。

  // tailwind.config.js
  module.exports = {
    theme: {
      borderRadius: {
        'none': '0',
-       'sm': '0.125rem',
-       DEFAULT: '0.25rem',
+       DEFAULT: '4px',
-       'md': '0.375rem',
-       'lg': '0.5rem',
-       'full': '9999px',
+       'large': '12px',
      }
    }
  }

Variants

变体

默认情况下， 针对 border radius 功能类，只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 borderRadius 属性来控制为 border radius 功能生成哪些变体。

例如，这个配置也将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       borderRadius: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 border radius 功能，您可以通过在配置文件的 corePlugins 部分将 borderRadius property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     borderRadius: false,
    }
  }