在 Tailwind CSS 中，圆角类可以接受多种值。所有属性都以类的形式覆盖。它是 CSS border-radius 属性 的替代方案。我们可以使用这个类来设置元素的圆角。
圆角类列表：
- rounded-none
- rounded-sm
- rounded
- rounded-md
- rounded-lg
- rounded-xl
- rounded-2xl
- rounded-3xl
- rounded-full
- rounded-t-none
- rounded-r-none
- rounded-b-none
- rounded-l-none
- rounded-t-sm
- rounded-r-sm
- rounded-b-sm
- rounded-l-sm
- rounded-t
- rounded-r
- rounded-b
- rounded-l
- rounded-t-md
- rounded-r-md
- rounded-b-md
- rounded-l-md
- rounded-t-lg
- rounded-r-lg
- rounded-b-lg
- rounded-l-lg
- rounded-t-xl
- rounded-r-xl
- rounded-b-xl
- rounded-l-xl
- rounded-t-2xl
- rounded-r-2xl
- rounded-b-2xl
- rounded-l-2xl
- rounded-t-3xl
- rounded-r-3xl
- rounded-b-3xl
- rounded-l-3xl
- rounded-t-full
- rounded-r-full
- rounded-b-full
- rounded-l-full
- rounded-tl-none
- rounded-tr-none
- rounded-br-none
- rounded-bl-none
- rounded-tl-sm
- rounded-tr-sm
- rounded-br-sm
- rounded-bl-sm
- rounded-tl
- rounded-tr
- rounded-br
- rounded-bl
- rounded-tl-md
- rounded-tr-md
- rounded-br-md
- rounded-bl-md
- rounded-tl-lg
- rounded-tr-lg
- rounded-br-lg
- rounded-bl-lg
- rounded-tl-xl
- rounded-tr-xl
- rounded-br-xl
- rounded-bl-xl
- rounded-tl-2xl
- rounded-tr-2xl
- rounded-br-2xl
- rounded-bl-2xl
- rounded-tl-3xl
- rounded-tr-3xl
- rounded-br-3xl
- rounded-bl-3xl
- rounded-tl-full
- rounded-tr-full
- rounded-br-full
- rounded-bl-full
圆角效果： 在本节中，我们将介绍用于创建常规圆角的类，例如 rounded-sm, rounded-md, rounded-lg 等，但不包括完全圆形或胶囊形状。
语法：
...
示例：
HTML
<link href=
"https://unpkg.com/[email protected]/dist/tailwind.min.css"
rel="stylesheet">
GeeksforGeeks
Tailwind CSS Border Radius Class
rounded-none
rounded
rounded-sm
rounded-md
rounded-lg
rounded-xl
`
**输出效果：**
**胶囊与圆形：** 在本节中，我们将介绍用于创建完整圆形和胶囊形状的类，如 rounded-full 类。
**语法：**
…
**示例：**
HTML
`
<link href=
"https://unpkg.com/[email protected]/dist/tailwind.min.css"
rel="stylesheet">
GeeksforGeeks
Tailwind CSS Border Radius Class
rounded-full for Design Pill
<div class="rounded-full mx-32 bg-green-400 h-24 w-24
flex items-center justify-center">
rounded-full for Circle