类型

实现方案

折角边框

容器上两个相对的角上，分别添加一个矩形，只设置相邻的两条边就会形成折角的效果，比如左上角的折角，使用border-top设置上边框，使用border-left设置左边线，变呈现出一个向右下开口的折角。

单侧边框

使用border-方位可以设置只有对应方位的单侧边框。

虚线边框

将border-style的值设置为dotted便可以实现虚线边框。

圆角内凹边框

边框的颜色可以设置成透明，所以两侧的圆角内凹是通过将圆形图案的相邻边框设置为透明实现的效果，比如左侧的圆形图案，设置border-left-color的值为transparent和border-bottom-color的值为transparent，形成一个只有右侧有边框的半圆形。

别具一格的按钮

通过设置border的不同类型值为按钮添加边框样式；通过设置border-radius属性四个角的值，展示不同的边框圆角样式。

属性名

作用

属性值

border

简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

border-width

border-style

border-color

border-style

属性指定要显示的边框类型。

dotted ：定义点线边框。

dashed：定义虚线边框。

solid：定义实线边框。

double：定义双边框。

groove：定义 3D 坡口边框。效果取决于 border-color 值。

ridge：定义 3D 脊线边框。效果取决于 border-color 值。

inset：定义 3D inset 边框。效果取决于 border-color 值。

outset：定义 3D outset 边框。效果取决于 border-color 值。

none：定义无边框。

hidden：定义隐藏边框。

border-width

属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick。

border-color

属性用于设置四个边框的颜色。

name：指定颜色名，比如 "red"。

HEX：指定十六进制值，比如 "#ff0000"。

RGB：指定 RGB 值，比如 "rgb(255,0,0)"。

HSL：指定 HSL 值，比如 "hsl(0, 100%, 50%)"。

transparent：透明。

border-radius

属性用于向元素添加圆角边框。

length：定义弯道的形状。

%：使用%定义角落的形状。

border-image

用于绘制边框的图像

border-image-source：用于指定要用于绘制边框的图像的位置。

border-image-slice：图像边界向内偏移。

border-image-width：图像边界的宽度。

border-image-outset：用于指定在边框外部绘制 border-image-area 的量。

border-image-repeat：用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。