Tailwind CSS on GitHub

边框圆角

用于控制元素边框半径的功能类。

Default class reference

Class
Properties
rounded-noneborder-radius: 0px;
rounded-smborder-radius: 0.125rem;
roundedborder-radius: 0.25rem;
rounded-mdborder-radius: 0.375rem;
rounded-lgborder-radius: 0.5rem;
rounded-xlborder-radius: 0.75rem;
rounded-2xlborder-radius: 1rem;
rounded-3xlborder-radius: 1.5rem;
rounded-fullborder-radius: 9999px;
rounded-t-noneborder-top-left-radius: 0px; border-top-right-radius: 0px;
rounded-r-noneborder-top-right-radius: 0px; border-bottom-right-radius: 0px;
rounded-b-noneborder-bottom-right-radius: 0px; border-bottom-left-radius: 0px;
rounded-l-noneborder-top-left-radius: 0px; border-bottom-left-radius: 0px;
rounded-t-smborder-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem;
rounded-r-smborder-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem;
rounded-b-smborder-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem;
rounded-l-smborder-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem;
rounded-tborder-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem;
rounded-rborder-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
rounded-bborder-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
rounded-lborder-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
rounded-t-mdborder-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem;
rounded-r-mdborder-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem;
rounded-b-mdborder-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem;
rounded-l-mdborder-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem;
rounded-t-lgborder-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;
rounded-r-lgborder-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
rounded-b-lgborder-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
rounded-l-lgborder-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
rounded-t-xlborder-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem;
rounded-r-xlborder-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem;
rounded-b-xlborder-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem;
rounded-l-xlborder-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem;
rounded-t-2xlborder-top-left-radius: 1rem; border-top-right-radius: 1rem;
rounded-r-2xlborder-top-right-radius: 1rem; border-bottom-right-radius: 1rem;
rounded-b-2xlborder-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem;
rounded-l-2xlborder-top-left-radius: 1rem; border-bottom-left-radius: 1rem;
rounded-t-3xlborder-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem;
rounded-r-3xlborder-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem;
rounded-b-3xlborder-bottom-right-radius: 1.5rem; border-bottom-left-radius: 1.5rem;
rounded-l-3xlborder-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem;
rounded-t-fullborder-top-left-radius: 9999px; border-top-right-radius: 9999px;
rounded-r-fullborder-top-right-radius: 9999px; border-bottom-right-radius: 9999px;
rounded-b-fullborder-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px;
rounded-l-fullborder-top-left-radius: 9999px; border-bottom-left-radius: 9999px;
rounded-tl-noneborder-top-left-radius: 0px;
rounded-tr-noneborder-top-right-radius: 0px;
rounded-br-noneborder-bottom-right-radius: 0px;
rounded-bl-noneborder-bottom-left-radius: 0px;
rounded-tl-smborder-top-left-radius: 0.125rem;
rounded-tr-smborder-top-right-radius: 0.125rem;
rounded-br-smborder-bottom-right-radius: 0.125rem;
rounded-bl-smborder-bottom-left-radius: 0.125rem;
rounded-tlborder-top-left-radius: 0.25rem;
rounded-trborder-top-right-radius: 0.25rem;
rounded-brborder-bottom-right-radius: 0.25rem;
rounded-blborder-bottom-left-radius: 0.25rem;
rounded-tl-mdborder-top-left-radius: 0.375rem;
rounded-tr-mdborder-top-right-radius: 0.375rem;
rounded-br-mdborder-bottom-right-radius: 0.375rem;
rounded-bl-mdborder-bottom-left-radius: 0.375rem;
rounded-tl-lgborder-top-left-radius: 0.5rem;
rounded-tr-lgborder-top-right-radius: 0.5rem;
rounded-br-lgborder-bottom-right-radius: 0.5rem;
rounded-bl-lgborder-bottom-left-radius: 0.5rem;
rounded-tl-xlborder-top-left-radius: 0.75rem;
rounded-tr-xlborder-top-right-radius: 0.75rem;
rounded-br-xlborder-bottom-right-radius: 0.75rem;
rounded-bl-xlborder-bottom-left-radius: 0.75rem;
rounded-tl-2xlborder-top-left-radius: 1rem;
rounded-tr-2xlborder-top-right-radius: 1rem;
rounded-br-2xlborder-bottom-right-radius: 1rem;
rounded-bl-2xlborder-bottom-left-radius: 1rem;
rounded-tl-3xlborder-top-left-radius: 1.5rem;
rounded-tr-3xlborder-top-right-radius: 1.5rem;
rounded-br-3xlborder-bottom-right-radius: 1.5rem;
rounded-bl-3xlborder-bottom-left-radius: 1.5rem;
rounded-tl-fullborder-top-left-radius: 9999px;
rounded-tr-fullborder-top-right-radius: 9999px;
rounded-br-fullborder-bottom-right-radius: 9999px;
rounded-bl-fullborder-bottom-left-radius: 9999px;

圆角

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

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

药丸形💊和圆圈

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

Pill Shape
Circle
<div class="rounded-full py-3 px-6...">Pill Shape</div>
<div class="rounded-full h-24 w-24 flex items-center justify-center...">Circle</div>

无圆角

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

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

.rounded-none
<div class="rounded-none ...">.rounded-none</div>

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

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

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

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

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

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

响应式

要在特定的断点处控制元素的边界半径,请在任何现有的边界半径功能类中添加 {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,
    }
  }