在HTML页面开发中，给元素添加边框是调整页面视觉层级、区分内容区域的常用操作。边框的设置主要通过CSS的border相关属性实现，其中border-width控制边框的粗细，border-color控制边框的显示颜色，二者配合其他边框属性可以组合出丰富的边框效果。
border-width属性基础说明
border-width用于定义元素边框的宽度，取值可以是长度单位、关键字或者全局值，常见的使用方式有以下几种：
1. 长度单位取值
可以直接使用px、em、rem等CSS长度单位设置边框宽度，数值越大边框越粗，默认值为0，即不显示边框。
/* 给div元素设置2px的边框宽度 */
div {
border-width: 2px;
}
/* 分别设置上右下左边框宽度 */
.box {
border-top-width: 1px;
border-right-width: 3px;
border-bottom-width: 1px;
border-left-width: 3px;
}
2. 关键字取值
border-width支持thin、medium、thick三个关键字，分别对应细、中等、粗三种预设宽度，不同浏览器对这三个关键字的默认映射值略有差异，通常thin对应1px，medium对应3px，thick对应5px。
/* 使用关键字设置边框宽度 */
p {
border-width: medium;
}
border-color属性基础说明
border-color用于定义边框的显示颜色，支持所有CSS合法的颜色取值方式，包括颜色名、十六进制值、RGB值、HSL值等。
1. 常见颜色取值方式
可以根据需求选择不同的颜色赋值方式，以下是几种常用的示例：
/* 颜色名赋值 */
span {
border-color: red;
}
/* 十六进制值赋值 */
.section {
border-color: #333333;
}
/* RGB值赋值 */
.card {
border-color: rgb(0, 128, 0);
}
/* HSL值赋值 */
.tag {
border-color: hsl(240, 100%, 50%);
}
2. 单边边框颜色设置
和border-width类似，border-color也支持单独设置某一条边的颜色，通过border-top-color、border-right-color等属性实现。
/* 分别设置四条边的边框颜色 */
.header {
border-top-color: #ff0000;
border-right-color: #00ff00;
border-bottom-color: #0000ff;
border-left-color: #ffff00;
}
border-width和border-color组合使用示例
单独设置border-width和border-color时，还需要配合border-style属性定义边框样式，否则边框不会显示，因为border-style的默认值是none。以下是完整的边框设置示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML边框设置示例</title>
<style>
.demo-box {
width: 200px;
height: 100px;
/* 设置边框样式为实线，必须设置否则边框不显示 */
border-style: solid;
/* 边框宽度设置为2px */
border-width: 2px;
/* 边框颜色设置为深灰色 */
border-color: #666666;
/* 可选：设置内边距避免内容贴边 */
padding: 10px;
}
.multi-border {
width: 200px;
height: 100px;
border-style: dashed;
/* 分别设置四条边的宽度 */
border-top-width: 1px;
border-right-width: 4px;
border-bottom-width: 1px;
border-left-width: 4px;
/* 分别设置四条边的颜色 */
border-top-color: #ff9900;
border-right-color: #0099ff;
border-bottom-color: #ff9900;
border-left-color: #0099ff;
padding: 10px;
}
</style>
</head>
<body>
<div class="demo-box">普通实线边框示例</div>
<br/>
<div class="multi-border">多边不同宽度颜色边框示例</div>
</body>
</html>
注意事项
- border-width和border-color都需要配合border-style使用，否则边框不会渲染，因为border-style默认值为none。
- 如果只设置border-width或者border-color，没有显式设置border-style，浏览器会忽略这两个属性的设置值。
- 可以使用border简写属性一次性设置边框的宽度、样式和颜色，例如
border: 2px solid #333;，顺序没有严格要求，但是一般会按照宽度、样式、颜色的顺序书写。
HTMLborder-widthborder-colorCSS边框修改时间：2026-06-15 16:33:17