边框半径（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属性。

边框宽度（border width）

边框大小

边框方位

边框颜色（border color）

边框透明度（border opacity）

边框样式（border style）

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>