在html5页面开发中，给元素添加边框是调整页面视觉效果的基础操作，核心实现方式是借助CSS的border相关属性完成，不需要额外的html5新增标签，只需要通过常规的样式设置就能实现不同需求的边框效果。
border属性基础语法
border是CSS的简写属性，可以同时设置边框的宽度、样式和颜色，基础语法格式如下：
/* 简写语法：border: 边框宽度 边框样式 边框颜色 */ border: 2px solid #ff0000;
上面的代码表示给元素设置一个宽度为2像素、实线样式、红色的边框，三个值的顺序没有强制要求，不过通常按照宽度、样式、颜色的顺序书写，可读性更好。
单独设置边框的各维度属性
如果不需要同时设置三个属性，也可以单独对border-width、border-style、border-color进行设置，每个属性也可以单独控制四个方向的边框。
设置边框粗细（border-width）
border-width用来定义边框的厚度，支持的单位包括像素px、相对单位em、rem，也可以使用thin、medium、thick这些关键字，示例如下：
/* 四个方向边框宽度都是3px */ border-width: 3px; /* 上右下左分别设置宽度 */ border-width: 1px 2px 3px 4px; /* 上下2px，左右4px */ border-width: 2px 4px;
设置边框样式（border-style）
border-style用来定义边框的显示类型，常用的值包括：
solid：实线边框，最常用的类型dashed：虚线边框dotted：点状边框double：双线边框none：无边框，默认值
示例如下：
/* 设置虚线边框 */ border-style: dashed; /* 上边框实线，其他方向虚线 */ border-style: solid dashed dashed dashed;
设置边框颜色（border-color）
border-color用来定义边框的颜色，支持颜色名、十六进制颜色值、rgb、rgba等所有CSS支持的颜色格式，示例如下：
/* 十六进制红色 */ border-color: #ff0000; /* rgb蓝色 */ border-color: rgb(0, 0, 255); /* 半透明绿色 */ border-color: rgba(0, 255, 0, 0.5); /* 四个方向不同颜色 */ border-color: #ff0000 #00ff00 #0000ff #ffff00;
单独设置某一方向的边框
如果只需要给元素的某一个方向添加边框，可以使用border-top、border-right、border-bottom、border-left单独设置，语法和整体border一致，示例如下：
/* 只给顶部添加2px实线黑色边框 */ border-top: 2px solid #000000; /* 只给右侧添加1px虚线灰色边框 */ border-right: 1px dashed #cccccc;
完整示例代码
下面是一个完整的html5页面示例，展示不同边框效果的实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS border边框示例</title>
<style>
.box1 {
width: 200px;
height: 100px;
/* 2px实线红色边框 */
border: 2px solid #ff0000;
margin-bottom: 20px;
}
.box2 {
width: 200px;
height: 100px;
/* 单独设置边框属性 */
border-width: 3px;
border-style: dashed;
border-color: #00ff00;
margin-bottom: 20px;
}
.box3 {
width: 200px;
height: 100px;
/* 只设置底部边框 */
border-bottom: 4px double #0000ff;
}
</style>
</head>
<body>
<div class="box1">2px实线红色边框</div>
<div class="box2">3px虚线绿色边框</div>
<div class="box3">仅底部4px双线蓝色边框</div>
</body>
</html>
将上面的代码保存为html文件后，用浏览器打开就能看到三种不同的边框效果，开发者可以根据自己的需求调整border相关的属性值，实现符合设计的边框样式。