HTML5元素边框由CSS border属性控制，可通过简写border、分项设置（width/style/color）、border-radius圆角、box-shadow模拟多重边框及outline实现焦点提示五种方式灵活定制。
HTML5中元素的边框样式完全由CSS的border属性控制，无需HTML5新标签即可实现。以下是通过CSS border设置元素边框粗细、颜色与样式的具体方法：
一、使用单条border简写属性
该方法将边框宽度、样式和颜色合并为一个声明，语法简洁且覆盖全部三要素。
1、在CSS中选择目标元素，例如div或p标签。
2、设置border属性值，格式为“border: 宽度 样式 颜色;”。
立即学习“前端免费学习笔记（深入）”；
3、宽度可选thin、medium、thick或具体像素值（如2px）。
4、样式必须指定，常用值包括solid、dashed、dotted、double、groove等。
5、颜色支持十六进制（#ff0000）、rgb(255,0,0)、英文名称（red）等合法CSS颜色值。
二、分别设置border-width、border-style、border-color
该方式将边框三要素拆解为独立属性，便于单独调整某一项，同时支持对四边差异化控制。
1、使用border-width设定整体或各边宽度，例如border-width: 1px 2px 3px 4px（上右下左顺序）。
2、使用border-style设定边框类型，可接受single值或四值语法（如border-style: solid dashed dotted double）。
3、使用border-color定义颜色，同样支持四值语法以区分上、右、下、左边框颜色。
4、若仅需修改某一侧边框，可使用border-top、border-right等方向性子属性，例如border-left: 3px dashed #0066cc。
三、应用border-radius实现圆角边框
border-radius虽不改变边框本身的粗细或颜色，但作为border体系的关键扩展，用于控制边框转角的曲率，是现代UI中不可或缺的视觉修饰手段。
1、在已设置border的元素上追加border-radius属性。
2、取值可为长度单位（px、em）或百分比，例如border-radius: 8px或border-radius: 50%。
3、支持四值语法分别控制左上、右上、右下、左下四个角，如border-radius: 4px 8px 12px 16px。
4、当四个角取值相同时，可简写为单个值；若水平与垂直半径不同，可用斜杠分隔，例如border-radius: 10px / 5px。
四、利用box-shadow模拟边框效果
当需要多重边框、虚实混合边框或非矩形轮廓时，box-shadow可作为border的替代或补充方案，尤其适用于不希望影响盒模型尺寸的场景。
1、设置box-shadow属性，基本格式为“box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 颜色;”。
2、将模糊半径设为0、扩展半径设为正值，即可生成清晰的单层外边框，例如box-shadow: 0 0 0 2px #333。
3、添加多个阴影值（用逗号分隔），可叠加多层边框，如box-shadow: 0 0 0 2px red, 0 0 0 4px blue。
4、配合inset关键字可生成内边框效果，例如box-shadow: inset 0 0 0 2px green。
五、使用outline实现焦点边框
outline常用于表单控件获得键盘焦点时的视觉提示，它绘制在元素边框之外，不占据布局空间，也不受border-radius影响。
1、为input、button等可聚焦元素设置outline属性。
2、语法与border类似，支持outline-width、outline-style、outline-color及简写outline。
3、常用组合为outline: 2px solid #007bff，确保键盘导航用户能清晰识别当前焦点。
4、若需禁用默认焦点轮廓（如Chrome中蓝色环），可设outline: none，但必须同步提供其他可访问的焦点指示样式。
