CSS 边框

我们可以通过 CSS 边框属性轻松设定元素边框的样式、宽度和颜色。

CSS 边框样式

在 CSS 中，使用 border-style 属性设置边框的样式类型。

允许使用以下值：

• none - 无边框
• hidden - 隐藏的边框
• dotted - 点状虚线边框
• dashed - 短线虚线边框
• solid - 实线边框
• double - 双实线边框
• groove - 有雕刻效果的边框
• ridge - 有浮雕效果的边框
• inset - 有陷入效果的边框
• outset - 有突起效果的边框

border-style 属性可以有 1 到 4 个值（用于上边框、右边框、下边框和左边框）。

一个实心边框：

p.dotted {
  border-style: solid;
}

!! 注意： 只有先 border-style 属性，其他 CSS 边框属性才有效果

元素有上下左右 4 个边框，CSS 分定义了 4 个属性来定义每个边框的样式类型：

• border-top-style: 设置元素的上边框的样式
• border-bottom-style: 设置元素的下边框的样式
• border-left-style: 设置元素的左边框的样式
• border-right-style: 设置元素的右边框的样式

为了简化写法，可以直接在 border-style 属性直接设置上下左右 4 个边框的样式。

border-style: dotted dashed solid double; /* 4 个值分别是对应 “上” “右” “下” “左” 边框的样式 */
border-style: dotted solid dashed; /* 3 个值分别对应 “上” “左右” “下” 边框的样式 */
border-style: dotted solid; /* 2 个值分别对应 “上下” “左右” 边框的样式 */
border-style: solid; /* 1 个对应 “上下左右” 4 个边框的样式 */

CSS 边框宽度

在 CSS 中，使用 border-width 属性设置四个边框的宽度。宽度的值可以设置为特定大小（以 px、pt、cm、em 等为单位）或使用三个预定义值之一：thin, medium, thick。

不同边框宽度的演示：

div.border-box {
  border-style: solid;
  border-width: 5px;
}

元素有上下左右 4 个边框，CSS 分定义了 4 个属性来定义每个边框的宽度：

• border-top-width: 设置元素的上边框的宽度
• border-bottom-width: 设置元素的下边框的宽度
• border-left-width: 设置元素的左边框的宽度
• border-right-width: 设置元素的右边框的宽度

为了简化写法，可以直接在 border-width 属性直接设置上下左右 4 个边框的宽度。

border-width: 1px 2px 3px 4px; /* 4 个值分别是对应 “上” “右” “下” “左” 边框的宽度 */
border-width: 1px 2px 3px; /* 3 个值分别对应 “上” “左右” “下” 边框的宽度 */
border-width: 1px 2px; /* 2 个值分别对应 “上下” “左右” 边框的宽度 */
border-width: 1px; /* 1 个对应 “上下左右” 4 个边框的宽度 */

CSS 边框颜色

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

具体的颜色取值，可参看小节 CSS 颜色。

红色边框：

div.border-box {
  border-style: solid;
  border-color: red;
}

元素有上下左右 4 个边框，CSS 分定义了 4 个属性来定义每个边框的样式颜色：

• border-top-color: 设置元素的上边框的颜色
• border-bottom-color: 设置元素的下边框的颜色
• border-left-color: 设置元素的左边框的颜色
• border-right-color: 设置元素的右边框的颜色

为了简化写法，可以直接在 border-color 属性直接设置上下左右 4 个边框的颜色。

border-color: red green blue gray; /* 4 个值分别是对应 “上” “右” “下” “左” 边框的颜色 */
border-color: red green blue; /* 3 个值分别对应 “上” “左右” “下” 边框的颜色 */
border-color: red green; /* 2 个值分别对应 “上下” “左右” 边框的颜色 */
border-color: red; /* 1 个对应 “上下左右” 4 个边框的颜色 */

CSS 边框属性简写 border

CSS 中的 border 属性是一个简写属性，让你在一个属性中定义边框的宽度、样式、颜色。

border 属性以下三个属性的简化写法：

语法： border: border-width border-style border-color

其中 border-style 是必须的。

使用 border 声明边框样式：

div.border-box {
  border: 5px solid red;
}

对于 4 个边框， CSS 分别使用 4 个简写属性来设置样式：

• border-top: 设置元素的上边框
• border-bottom: 设置元素的下边框
• border-left: 设置元素的左边框
• border-right: 设置元素的右边框

独立声明每个边框样式：

div.border-box {
  border-top: 5px solid red;
  border-bottom: 5px solid green;
  border-left: 5px solid blue;
  border-right: 5px solid gray;
}

所有 CSS 边框属性