边框半径（border radius）
border-redius属性用于为元素设置圆角边框，可使用border-*-radius设置四个方位的圆角。圆角的设置是通过使用半径实现的，当使用一个半径时可以确定一个圆形，当使用两个半径时可以确定一个椭圆，椭圆或原与边框的交集形成了圆角的效果。
rounded
border-radius: 1-4 length|% / 1-4 length | %;
斜线/前的4个数值表示元素的水平半径，斜线/后的4个值则表示圆角的垂直半径。根据水平半径和垂直半径的值，可形成一个椭圆或圆。椭圆或圆与边框的交集就是圆角。 圆角属性值单位可使用px、%、em。
image.png
例如：完整写法
border-radius:30px;
border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
圆角border-radius实际上是由4个方位的圆角构成的
- 左上
border-top-left-radius - 右上
border-top-right-radius - 右下
border-bottom-right-radius - 左下
border-bottom-left-radius
border
例如：
border-top-left-radius:50px;
左上圆角水平半径为50px、垂直半径为50px。
border-top-left-radius
border-top-left-radius:50px 100px;
左上圆角水平半径为50px、垂直半径为100px。
border-top-left-radius
圆角border-radius属性的4个方位顺序依次是左上top-left、右上top-right、右下bottom-right、左下 bottom-left
border-radius:30px;
border-radius:30px 30px 30px 30px;
Tailwind中使用.rounded-前缀的工具类来设置border-radius属性。
| 工具类 | 属性 |
|---|---|
| rounded-none | border-radius:0 |
| rounded-sm | border-radius:0.125rem; |
| rounded | border-radius:0.25rem; |
| rounded-md | border-radius:0.375rem; |
| rounded-lg | border-radius:0.5rem; |
| rounded-full | border-radius:9999px; |
边框宽度（border width）
边框大小
| 工具类 | 属性 |
|---|---|
| border-0 | border-width:0 |
| border-2 | border-width:2px |
| border-4 | border-width:4px |
| border-8 | border-width:8px |
边框方位
| 工具类 | 属性 |
|---|---|
| border | border-width:1px |
| border-t | border-top-width:1px |
| border-r | border-right-width:1px |
| border-b | border-bottom-width:1px |
| border-l | border-left-width:1px |
边框颜色（border color）
| 工具类 | 属性 |
|---|---|
| border-transparent | border-color:transparent |
| border-current | border-color:currentColor |
| border-block | border-color:#000 |
| border-white | border-color:#fff |
边框透明度（border opacity）
| 工具类 | 属性 |
|---|---|
| border-opacity-0 | --border-opacity:0 |
| border-opacity-25 | --border-opacity:0.25 |
| border-opacity-50 | --border-opacity:0.5 |
| border-opacity-75 | --border-opacity:0.75 |
| border-opacity-100 | --border-opacity:1 |
边框样式（border style）
| 工具类 | 属性 |
|---|---|
| border-none | border-style:none |
| border-solid | border-style:solid |
| border-dashed | border-style:dashed |
| border-dotted | border-style:dotted |
| border-double | border-style:double |
border style
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<div class="container mx-auto my-4 p-4 flex flex-row justify-between">
<div class="w-48 h-48 m-2 bg-gray-200 border-4 border-black border-solid"></div>
<div class="w-48 h-48 m-2 bg-gray-200 border-4 border-black border-dashed"></div>
<div class="w-48 h-48 m-2 bg-gray-200 border-4 border-black border-dotted"></div>
<div class="w-48 h-48 m-2 bg-gray-200 border-4 border-black border-double"></div>
</div>
