Tailwind Border

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