Tailwind CSS - 边框半径
Tailwind CSS 边框半径 由用于圆化元素角的预定义类组成。这些类应用不同级别的圆化效果，从无圆化到完全圆化。
Tailwind CSS border-radius 边框半径类
以下是 Tailwind CSS border-radius 边框半径类和属性的列表，用于圆化元素角，并提供各种选项。
| 类 | CSS 属性 |
|---|---|
| rounded-none | border-radius: 0px; |
| rounded-sm | border-radius: 0.125rem; /* 2px */ |
| rounded | border-radius: 0.25rem; /* 4px */ |
| rounded-md | border-radius: 0.375rem; /* 6px */ |
| rounded-lg | border-radius: 0.5rem; /* 8px */ |
| rounded-xl | border-radius: 0.75rem; /* 12px */ |
| rounded-2xl | border-radius: 1rem; /* 16px */ |
| rounded-3xl | border-radius: 1.5rem; /* 24px */ |
| rounded-full | border-radius: 9999px; |
| rounded-s-none | border-start-start-radius: 0px; border-end-start-radius: 0px; |
| rounded-s-sm | border-start-start-radius: 0.125rem; /* 2px */ border-end-start-radius: 0.125rem; /* 2px */ |
| rounded-s | border-start-start-radius: 0.25rem; /* 4px */ border-end-start-radius: 0.25rem; /* 4px */ |
| rounded-s-md | border-start-start-radius: 0.375rem; /* 6px */ border-end-start-radius: 0.375rem; /* 6px */ |
| rounded-s-lg | border-start-start-radius: 0.5rem; /* 8px */ border-end-start-radius: 0.5rem; /* 8px */ |
| rounded-s-xl | border-start-start-radius: 0.75rem; /* 12px */ border-end-start-radius: 0.75rem; /* 12px */ |
| rounded-s-2xl | border-start-start-radius: 1rem; /* 16px */ border-end-start-radius: 1rem; /* 16px */ |
| rounded-s-3xl | border-start-start-radius: 1.5rem; /* 24px */ border-end-start-radius: 1.5rem; /* 24px */ |
| rounded-s-full | border-start-start-radius: 9999px; border-end-start-radius: 9999px; |
| rounded-e-none | border-start-end-radius: 0px; border-end-end-radius: 0px; |
| rounded-e-sm | border-start-end-radius: 0.125rem; /* 2px */ border-end-end-radius: 0.125rem; /* 2px */ |
| rounded-e | border-start-end-radius: 0.25rem; /* 4px */ border-end-end-radius: 0.25rem; /* 4px */ |
| rounded-e-md | border-start-end-radius: 0.375rem; /* 6px */ border-end-end-radius: 0.375rem; /* 6px */ |
| rounded-e-lg | border-start-end-radius: 0.5rem; /* 8px */ border-end-end-radius: 0.5rem; /* 8px */ |
| rounded-e-xl | border-start-end-radius: 0.75rem; /* 12px */ border-end-end-radius: 0.75rem; /* 12px */ |
| rounded-e-2xl | border-start-end-radius: 1rem; /* 16px */ border-end-end-radius: 1rem; /* 16px */ |
| rounded-e-3xl | border-start-end-radius: 1.5rem; /* 24px */ border-end-end-radius: 1.5rem; /* 24px */ |
| rounded-e-full | border-start-end-radius: 9999px; border-end-end-radius: 9999px; |
| rounded-t-none | border-top-left-radius: 0px; border-top-right-radius: 0px; |
| rounded-t-sm | border-top-left-radius: 0.125rem; /* 2px */ border-top-right-radius: 0.125rem; /* 2px */ |
| rounded-t | border-top-left-radius: 0.25rem; /* 4px */ border-top-right-radius: 0.25rem; /* 4px */ |
| rounded-t-md | border-top-left-radius: 0.375rem; /* 6px */ border-top-right-radius: 0.375rem; /* 6px */ |
| rounded-t-lg | border-top-left-radius: 0.5rem; /* 8px */ border-top-right-radius: 0.5rem; /* 8px */ |
| rounded-t-xl | border-top-left-radius: 0.75rem; /* 12px */ border-top-right-radius: 0.75rem; /* 12px */ |
| rounded-t-2xl | border-top-left-radius: 1rem; /* 16px */ border-top-right-radius: 1rem; /* 16px */ |
| rounded-t-3xl | border-top-left-radius: 1.5rem; /* 24px */ border-top-right-radius: 1.5rem; /* 24px */ |
| rounded-t-full | border-top-left-radius: 9999px; border-top-right-radius: 9999px; |
| rounded-r-none | border-top-right-radius: 0px; border-bottom-right-radius: 0px; |
| rounded-r-sm | border-top-right-radius: 0.125rem; /* 2px */ border-bottom-right-radius: 0.125rem; /* 2px */ |
| rounded-r | border-top-right-radius: 0.25rem; /* 4px */ border-bottom-right-radius: 0.25rem; /* 4px */ |
| rounded-r-md | border-top-right-radius: 0.375rem; /* 6px */ border-bottom-right-radius: 0.375rem; /* 6px */ |
| rounded-r-lg | border-top-right-radius: 0.5rem; /* 8px */ border-bottom-right-radius: 0.5rem; /* 8px */ |
| rounded-r-xl | border-top-right-radius: 0.75rem; /* 12px */ border-bottom-right-radius: 0.75rem; /* 12px */ |
| rounded-r-2xl | border-top-right-radius: 1rem; /* 16px */ border-bottom-right-radius: 1rem; /* 16px */ |
| rounded-r-3xl | border-top-right-radius: 1.5rem; /* 24px */ border-bottom-right-radius: 1.5rem; /* 24px */ |
| rounded-r-full | border-top-right-radius: 9999px; border-bottom-right-radius: 9999px; |
| rounded-b-none | border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; |
| rounded-b-sm | border-bottom-right-radius: 0.125rem; /* 2px */ border-bottom-left-radius: 0.125rem; /* 2px */ |
| rounded-b | border-bottom-right-radius: 0.25rem; /* 4px */ border-bottom-left-radius: 0.25rem; /* 4px */ |
| rounded-b-md | border-bottom-right-radius: 0.375rem; /* 6px */ border-bottom-left-radius: 0.375rem; /* 6px */ |
| rounded-b-lg | border-bottom-right-radius: 0.5rem; /* 8px */ border-bottom-left-radius: 0.5rem; /* 8px */ |
| rounded-b-xl | border-bottom-right-radius: 0.75rem; /* 12px */ border-bottom-left-radius: 0.75rem; /* 12px */ |
| rounded-b-2xl | border-bottom-right-radius: 1rem; /* 16px */ border-bottom-left-radius: 1rem; /* 16px */ |
| rounded-b-3xl | border-bottom-right-radius: 1.5rem; /* 24px */ border-bottom-left-radius: 1.5rem; /* 24px */ |
| rounded-b-full | border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px; |
| rounded-l-none | border-top-left-radius: 0px; border-bottom-left-radius: 0px; |
| rounded-l-sm | border-top-left-radius: 0.125rem; /* 2px */ border-bottom-left-radius: 0.125rem; /* 2px */ |
| rounded-l | border-top-left-radius: 0.25rem; /* 4px */ border-bottom-left-radius: 0.25rem; /* 4px */ |
| rounded-l-md | border-top-left-radius: 0.375rem; /* 6px */ border-bottom-left-radius: 0.375rem; /* 6px */ |
| rounded-l-lg | border-top-left-radius: 0.5rem; /* 8px */ border-bottom-left-radius: 0.5rem; /* 8px */ |
| rounded-l-xl | border-top-left-radius: 0.75rem; /* 12px */ border-bottom-left-radius: 0.75rem; /* 12px */ |
| rounded-l-2xl | border-top-left-radius: 1rem; /* 16px */ border-bottom-left-radius: 1rem; /* 16px */ |
| rounded-l-3xl | border-top-left-radius: 1.5rem; /* 24px */ border-bottom-left-radius: 1.5rem; /* 24px */ |
| rounded-l-full | border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; |
| rounded-ss-none | border-start-start-radius: 0px; |
| rounded-ss-sm | border-start-start-radius: 0.125rem; /* 2px */ |
| rounded-ss | border-start-start-radius: 0.25rem; /* 4px */ |
| rounded-ss-md | border-start-start-radius: 0.375rem; /* 6px */ |
| rounded-ss-lg | border-start-start-radius: 0.5rem; /* 8px */ |
| rounded-ss-xl | border-start-start-radius: 0.75rem; /* 12px */ |
| rounded-ss-2xl | border-start-start-radius: 1rem; /* 16px */ |
| rounded-ss-3xl | border-start-start-radius: 1.5rem; /* 24px */ |
| rounded-ss-full | border-start-start-radius: 9999px; |
| rounded-se-none | border-start-end-radius: 0px; |
| rounded-se-sm | border-start-end-radius: 0.125rem; /* 2px */ |
| rounded-se | border-start-end-radius: 0.25rem; /* 4px */ |
| rounded-se-md | border-start-end-radius: 0.375rem; /* 6px */ |
| rounded-se-lg | border-start-end-radius: 0.5rem; /* 8px */ |
| rounded-se-xl | border-start-end-radius: 0.75rem; /* 12px */ |
| rounded-se-2xl | border-start-end-radius: 1rem; /* 16px */ |
| rounded-se-3xl | border-start-end-radius: 1.5rem; /* 24px */ |
| rounded-se-full | border-start-end-radius: 9999px; |
| rounded-ee-none | border-end-end-radius: 0px; |
| rounded-ee-sm | border-end-end-radius: 0.125rem; /* 2px */ |
| rounded-ee | border-end-end-radius: 0.25rem; /* 4px */ |
| rounded-ee-md | border-end-end-radius: 0.375rem; /* 6px */ |
| rounded-ee-lg | border-end-end-radius: 0.5rem; /* 8px */ |
| rounded-ee-xl | border-end-end-radius: 0.75rem; /* 12px */ |
| rounded-ee-2xl | border-end-end-radius: 1rem; /* 16px */ |
| rounded-ee-3xl | border-end-end-radius: 1.5rem; /* 24px */ |
| rounded-ee-full | border-end-end-radius: 9999px; |
| rounded-es-none | border-end-start-radius: 0px; |
| rounded-es-sm | border-end-start-radius: 0.125rem; /* 2px */ |
| rounded-es | border-end-start-radius: 0.25rem; /* 4px */ |
| rounded-es-md | border-end-start-radius: 0.375rem; /* 6px */ |
| rounded-es-lg | border-end-start-radius: 0.5rem; /* 8px */ |
| rounded-es-xl | border-end-start-radius: 0.75rem; /* 12px */ |
| rounded-es-2xl | border-end-start-radius: 1rem; /* 16px */ |
| rounded-es-3xl | border-end-start-radius: 1.5rem; /* 24px */ |
| rounded-es-full | border-end-start-radius: 9999px; |
| rounded-tl-none | border-top-left-radius: 0px; |
| rounded-tl-sm | border-top-left-radius: 0.125rem; /* 2px */ |
| rounded-tl | border-top-left-radius: 0.25rem; /* 4px */ |
| rounded-tl-md | border-top-left-radius: 0.375rem; /* 6px */ |
| rounded-tl-lg | border-top-left-radius: 0.5rem; /* 8px */ |
| rounded-tl-xl | border-top-left-radius: 0.75rem; /* 12px */ |
| rounded-tl-2xl | border-top-left-radius: 1rem; /* 16px */ |
| rounded-tl-3xl | border-top-left-radius: 1.5rem; /* 24px */ |
| rounded-tl-full | border-top-left-radius: 9999px; |
| rounded-tr-none | border-top-right-radius: 0px; |
| rounded-tr-sm | border-top-right-radius: 0.125rem; /* 2px */ |
| rounded-tr | border-top-right-radius: 0.25rem; /* 4px */ |
| rounded-tr-md | border-top-right-radius: 0.375rem; /* 6px */ |
| rounded-tr-lg | border-top-right-radius: 0.5rem; /* 8px */ |
| rounded-tr-xl | border-top-right-radius: 0.75rem; /* 12px */ |
| rounded-tr-2xl | border-top-right-radius: 1rem; /* 16px */ |
| rounded-tr-3xl | border-top-right-radius: 1.5rem; /* 24px */ |
| rounded-tr-full | border-top-right-radius: 9999px; |
| rounded-br-none | border-bottom-right-radius: 0px; |
| rounded-br-sm | border-bottom-right-radius: 0.125rem; /* 2px */ |
| rounded-br | border-bottom-right-radius: 0.25rem; /* 4px */ |
| rounded-br-md | border-bottom-right-radius: 0.375rem; /* 6px */ |
| rounded-br-lg | border-bottom-right-radius: 0.5rem; /* 8px */ |
| rounded-br-xl | border-bottom-right-radius: 0.75rem; /* 12px */ |
| rounded-br-2xl | border-bottom-right-radius: 1rem; /* 16px */ |
| rounded-br-3xl | border-bottom-right-radius: 1.5rem; /* 24px */ |
| rounded-br-full | border-bottom-right-radius: 9999px; |
| rounded-bl-none | border-bottom-left-radius: 0px; |
| rounded-bl-sm | border-bottom-left-radius: 0.125rem; /* 2px */ |
| rounded-bl | border-bottom-left-radius: 0.25rem; /* 4px */ |
| rounded-bl-md | border-bottom-left-radius: 0.375rem; /* 6px */ |
| rounded-bl-lg | border-bottom-left-radius: 0.5rem; /* 8px */ |
| rounded-bl-xl | border-bottom-left-radius: 0.75rem; /* 12px */ |
| rounded-bl-2xl | border-bottom-left-radius: 1rem; /* 16px */ |
| rounded-bl-3xl | border-bottom-left-radius: 1.5rem; /* 24px */ |
| rounded-bl-full | border-bottom-left-radius: 9999px; |
Tailwind CSS 边框半径类的功能
- rounded-*-none: 表示不进行圆角处理，半径为 0px。
- rounded-*-sm: 表示进行小圆角处理，半径为 0.125rem (2px)。
- rounded-*:表示进行默认圆角处理，半径为 0.25rem (4px)。
- rounded-*-md: 表示进行中等圆角处理，半径为 0.375rem (6px)。
- rounded-*-lg: 表示进行大圆角处理，半径为 0.5rem (8px)。
- rounded-*-xl: 表示进行超大圆角处理，半径为0.75rem (12px)。
- rounded-*-2xl:应用 2 倍超大圆角，半径为 1rem (16px)。
- rounded-*-3xl:应用 3 倍超大圆角，半径为 1.5rem (24px)。
- rounded-*-full:应用完全圆角，半径为 9999px。
将"*"替换为特定的边或角(例如，s、e、t、r、b、l、ss、se、ee、es、tl、tr、br、bl)，其中:
- rounded-s:将起始边的角圆化(左)。
- rounded-e: 将末端的角变为圆角(右)。
- rounded-t: 将顶角(左上角和右上角)变为圆角。
- rounded-r: 将右角(右上角和右下角)变为圆角。
- rounded-b: 将底角(右下角和左下角)变为圆角。
- rounded-l: 将左角(左上角和左下角)变为圆角。
- rounded-ss: 将起始角变为圆角(左上角)。
- rounded-se: 将起始角变为圆角(右上角)。
- rounded-ee: 将末端角变为圆角圆角(右下角)。
- rounded-es:圆化起始和结束角(左下角)。
- rounded-tl:圆化左上角。
- rounded-tr:圆化右上角。
- rounded-br:圆化右下角。
- rounded-bl:圆化左下角。
Tailwind CSS 边框半径类示例
以下是 Tailwind CSS 边框半径类示例，展示了如何以各种尺寸圆化元素的角。这些类可让您轻松地在设计中添加平滑、自定义的曲线。
实现圆角边框
此示例展示了不同的 Tailwind CSS 边框半径类，以及它们如何在网格布局中修改框角的圆度(从 rounded-sm 到 rounded-full)。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Border Radius
</h2>
<p class="text-xl font-bold mb-4">Border Radius Sizes</p>
<div class="grid grid-cols-3 gap-4 mb-6">
<div>
<p class="underline font-bold">rounded-none</p>
<div class="w-20 h-20 bg-green-500 rounded-none"></div>
</div>
<div>
<p class="underline font-bold">rounded-sm</p>
<div class="w-20 h-20 bg-green-300 rounded-sm"></div>
</div>
<div>
<p class="underline font-bold">rounded</p>
<div class="w-20 h-20 bg-green-400 rounded"></div>
</div>
<div>
<p class="underline font-bold">rounded-md</p>
<div class="w-20 h-20 bg-green-500 rounded-md"></div>
</div>
<div>
<p class="underline font-bold">rounded-lg</p>
<div class="w-20 h-20 bg-green-600 rounded-lg"></div>
</div>
<div>
<p class="underline font-bold">rounded-xl</p>
<div class="w-20 h-20 bg-green-700 rounded-xl"></div>
<p class="font-bold">Can be applied similarly
<br>for 2xl and 3xl.</p>
</div>
<div>
<p class="underline font-bold">rounded-full</p>
<div class="w-20 h-20 bg-green-900 rounded-full"></div>
</div>
</div>
</body>
</html>
在特定侧边设置圆角边框
此示例展示如何使用 Tailwind CSS 将圆角应用于框的特定侧边。您可以针对各个侧边，例如左上角、右上角、左下角和右下角。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Border Radius
</h2>
<p class="text-xl font-bold mb-4">
Rounded Corners on Specific Sides
</p>
<div class="grid grid-cols-2 gap-4">
<div>
<p class="underline font-bold">rounded-tl</p>
<div class="w-20 h-20 bg-blue-500 rounded-tl-md"></div>
</div>
<div>
<p class="underline font-bold">rounded-tr</p>
<div class="w-20 h-20 bg-red-500 rounded-tr-lg"></div>
</div>
<div>
<p class="underline font-bold">rounded-bl</p>
<div class="w-20 h-20 bg-yellow-500 rounded-bl-xl"></div>
</div>
<div>
<p class="underline font-bold">rounded-br</p>
<div class="w-20 h-20 bg-purple-500 rounded-br-2xl"></div>
</div>
</div>
</body>
</html>
单侧圆角边框
此示例展示如何使用 Tailwind CSS 边框半径类将边框半径仅应用于元素的一侧。您可以只对顶部、底部、左侧或右侧角进行圆角处理。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Border Radius
</h2>
<p class="text-xl font-bold mb-4">
Single-Side Border Radius Examples
</p>
<div class="grid grid-cols-2 gap-4 mb-6">
<div>
<p class="underline font-bold">rounded-tl-md</p>
<div class="w-20 h-20 bg-blue-300 rounded-tl-md"></div>
</div>
<div>
<p class="underline font-bold">rounded-tr-lg</p>
<div class="w-20 h-20 bg-red-300 rounded-tr-lg"></div>
</div>
<div>
<p class="underline font-bold">rounded-bl-xl</p>
<div class="w-20 h-20 bg-green-300 rounded-bl-xl"></div>
</div>
<div>
<p class="underline font-bold">rounded-br-2xl</p>
<div class="w-20 h-20 bg-yellow-300 rounded-br-2xl"></div>
</div>
</div>
</body>
</html>
多个圆角边框
此示例展示了如何组合不同的边框半径类。通过组合使用多个半径类，您可以混合搭配不同的半径值，打造独特的设计，并对元素的不同角应用不同的圆角样式。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Border Radius
</h2>
<p class="text-xl font-bold mb-2">
Combining Different Border Radius Sizes
</p>
<div class="grid grid-cols-2 gap-4 mb-6">
<div>
<p class="underline font-bold">rounded-tl-lg rounded-br-xl</p>
<div class="w-20 h-20 bg-cyan-300 rounded-tl-lg rounded-br-xl"></div>
</div>
<div>
<p class="underline font-bold">rounded-tr-md rounded-bl-lg</p>
<div class="w-20 h-20 bg-orange-300 rounded-tr-md rounded-bl-lg"></div>
</div>
<div>
<p class="underline font-bold">rounded-t-md rounded-b-xl</p>
<div class="w-20 h-20 bg-teal-300 rounded-t-md rounded-b-xl"></div>
</div>
<div>
<p class="underline font-bold">rounded-tl-xl rounded-br-md</p>
<div class="w-20 h-20 bg-purple-300 rounded-tl-xl rounded-br-md"></div>
</div>
</div>
</body>
</html>
输入字段的圆角边框
此示例展示了应用于输入字段的不同边框半径大小，突出了不同程度的圆度如何影响表单字段的设计。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Border Radius
</h2>
<p class="text-xl font-bold mb-4">
Different Border Radius Sizes for Form Inputs
</p>
<div class="grid grid-cols-2 gap-4 mb-6">
<div>
<p class="underline font-bold">rounded-sm</p>
<input type="text" placeholder="Small Radius"
class="w-full p-2 border-2 border-blue-500 rounded-sm">
</div>
<div>
<p class="underline font-bold">rounded-md</p>
<input type="text" placeholder="Medium Radius"
class="w-full p-2 border-2 border-blue-500 rounded-md">
</div>
<div>
<p class="underline font-bold">rounded-lg</p>
<input type="text" placeholder="Large Radius"
class="w-full p-2 border-2 border-blue-500 rounded-lg">
</div>
<div>
<p class="underline font-bold">rounded-xl</p>
<input type="text" placeholder="Extra-large Radius"
class="w-full p-2 border-2 border-blue-500 rounded-xl">
</div>
</div>
</body>
</html>
