HTML5中并没有独立的标签用于设置元素边框，所有边框相关的样式都需要通过CSS的border系列属性来实现，这也是前端开发中最基础也最常用的样式配置能力之一。
一、基础边框的核心属性
设置基础边框最常用的就是border简写属性，它可以同时设置边框的宽度、样式和颜色三个核心参数，语法格式如下：
/* border简写语法：border: 宽度 样式 颜色; */ border: 2px solid #333;
三个参数的具体说明如下：
- 宽度：可以用px、em等单位，也可以用thin、medium、thick等关键字，默认是medium
- 样式：必须设置，否则边框不会显示，常用值有solid（实线）、dashed（虚线）、dotted（点线）、double（双线）
- 颜色：可以用颜色名、十六进制值、rgb值等，默认取元素文本颜色
二、完整基础示例
下面是一个给div元素设置基础边框的完整HTML5示例，直接在浏览器中运行就能看到效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5基础边框示例</title>
<style>
.base-border {
width: 200px;
height: 100px;
/* 设置2px宽的黑色实线边框 */
border: 2px solid #000000;
/* 让文字居中显示，方便查看效果 */
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="base-border">带边框的盒子</div>
</body>
</html>
三、单独设置单边边框
如果只需要给元素的某一边设置边框，可以使用对应的单边属性，不需要设置其他边的边框：
/* 只设置上边框 */ border-top: 1px dashed #ff0000; /* 只设置右边框 */ border-right: 3px double #00ff00; /* 只设置下边框 */ border-bottom: 2px dotted #0000ff; /* 只设置左边框 */ border-left: 4px solid #ff00ff;
四、圆角边框设置
除了直角边框，还可以通过border-radius属性设置圆角边框，数值越大圆角越明显：
/* 四个角都设置10px圆角 */ border-radius: 10px; /* 左上角20px，右上角10px，右下角30px，左下角40px */ border-radius: 20px 10px 30px 40px; /* 设置50%可以实现圆形边框（元素宽高相等时） */ border-radius: 50%;
五、边框样式对照表
以下是常用边框样式的显示效果对照：
| 样式值 | 效果说明 |
|---|---|
| solid | 实线边框，最常用的样式 |
| dashed | 虚线边框，由短线段组成 |
| dotted | 点线边框，由小圆点组成 |
| double | 双线边框，两条线之间有间隙 |
| none | 无边框，默认值 |
六、注意事项
设置边框时需要注意几个常见问题：
- 如果只写
border: 1px;不写样式，边框不会显示，因为样式是必填参数 - 边框的宽度会算入元素的总宽度和高度，比如元素width是200px，border-left和border-right各2px，元素实际占位是204px
- 如果需要边框不影响元素布局，可以搭配
box-sizing: border-box;属性，让边框宽度算入元素设置的width和height内
/* 让边框宽度计入元素宽高，避免布局偏移 */
.box {
width: 200px;
height: 100px;
border: 2px solid #333;
box-sizing: border-box;
}