在css中border是用于设置元素边框的复合属性，它可以同时定义元素四条边框的宽度、样式和颜色，也可以单独针对某一条边框进行个性化设置，是前端页面样式调整中非常常用的属性。
border的基本语法
border作为复合属性，完整的写法可以同时指定三个子属性，语法格式如下：
/* 复合属性写法：border: 宽度 样式 颜色 */
.box {
border: 2px solid #ff0000;
}
这三个子属性分别是：
- border-width：定义边框的宽度，支持像素、em、rem等单位，默认值是medium
- border-style：定义边框的样式，是必须设置的属性，否则边框不会显示，常见值有solid（实线）、dashed（虚线）、dotted（点线）等
- border-color：定义边框的颜色，支持颜色名、十六进制、rgb等格式，默认值是元素自身的文本颜色
border的拆分设置方式
如果需要单独设置某一条边框或者某个子属性，可以使用对应的拆分属性：
按方向拆分
可以单独设置上、右、下、左四条边框的样式：
/* 单独设置顶部边框 */
.top-border {
border-top: 1px solid #333;
}
/* 单独设置右侧边框 */
.right-border {
border-right: 2px dashed #666;
}
/* 单独设置底部边框 */
.bottom-border {
border-bottom: 3px dotted #999;
}
/* 单独设置左侧边框 */
.left-border {
border-left: 1px solid #ccc;
}
按属性拆分
也可以单独设置所有边框的宽度、样式或颜色：
/* 单独设置所有边框宽度 */
.all-width {
border-width: 2px;
}
/* 单独设置所有边框样式 */
.all-style {
border-style: solid;
}
/* 单独设置所有边框颜色 */
.all-color {
border-color: #f0f0f0;
}
常见border样式值说明
border-style的取值决定了边框的显示形态，常见的取值如下表：
| 属性值 | 含义 |
|---|---|
| solid | 实线边框 |
| dashed | 虚线边框 |
| dotted | 点线边框 |
| double | 双线边框，两条线宽度和间距之和等于border-width的值 |
| none | 无边框，默认值 |
| hidden | 隐藏边框，效果和none类似，用于表格边框冲突处理 |
实际使用示例
下面是一个完整的html示例，展示不同border设置的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>border示例</title>
<style>
.base {
width: 200px;
height: 100px;
margin: 20px auto;
text-align: center;
line-height: 100px;
}
.solid-border {
border: 2px solid #ff0000;
}
.dashed-border {
border: 2px dashed #00ff00;
}
.top-only {
border-top: 3px dotted #0000ff;
}
</style>
</head>
<body>
<div class="base solid-border">实线边框</div>
<div class="base dashed-border">虚线边框</div>
<div class="base top-only">仅顶部点线边框</div>
</body>
</html>
注意事项
- 如果只写
border: 1px;没有指定border-style，边框不会显示，因为border-style默认是none - border会占据元素的额外空间，元素的实际宽度会等于width + border-width + padding，如果需要边框不增加元素总宽度，可以设置
box-sizing: border-box; - 设置border-radius可以让边框变成圆角，不会影响border本身的基本属性含义