HTML5中需用CSS添加边框：一、用border属性设宽/样/色；二、用border-top等单边属性；三、border-radius配border做圆角；四、outline实现外轮廓；五、box-shadow模拟无重排边框。

如果您希望在HTML5页面中为元素添加边框，需通过CSS控制视觉样式，因为HTML5本身不提供原生边框标签。以下是实现边框效果的多种方法与对应CSS样式技巧：

一、使用border属性直接设置边框

border是CSS中最基础且常用的边框控制属性，可一次性定义边框的宽度、样式和颜色。

1、在HTML元素的style属性中写入内联样式：style="border: 2px solid #333;"。

2、为div元素添加该样式：内容。

3、支持分别设置三部分：宽度（如1px）、样式（如dashed、dotted、double）、颜色（如red或#ff6b6b）。

二、分别设置上右下左边框

当需要对某一边单独控制边框时，可使用border-top、border-right、border-bottom、border-left四个独立属性。

1、仅给顶部加红色虚线：style="border-top: 1px dashed red;"。

2、同时设置左右边框为绿色双线：style="border-left: 3px double green; border-right: 3px double green;"。

3、可混合使用，例如顶部实线、底部点线、左右无边框。

三、利用border-radius配合边框创建圆角效果

border-radius虽非边框本身，但与border协同使用可改变边框形状，常用于卡片、按钮等UI组件。

1、添加圆角边框需先确保已设置border属性，再追加border-radius：style="border: 1px solid #ccc; border-radius: 8px;"。

2、支持不同值组合，如border-radius: 4px 8px 4px 0;表示左上、右上、右下、左下四个角的半径。

3、使用50%可实现圆形边框（适用于宽高相等的元素）。

四、使用outline替代border实现外发光式轮廓

outline位于元素边框之外，不占用布局空间，适合做焦点提示或临时高亮，不影响盒模型尺寸。

1、为输入框添加蓝色焦点轮廓：input:focus { outline: 2px solid #4285f4; }。

2、可设置outline-offset调整轮廓与边框的距离，例如outline-offset: 2px;。

3、注意outline不支持单边设置，也不影响margin或padding计算。

五、通过box-shadow模拟边框效果

box-shadow可在元素周围投射阴影，当模糊值为0、偏移为0时，可生成类似“伪边框”的环状线条。

1、生成1像素黑色描边：style="box-shadow: 0 0 0 1px #000;"。

2、支持多层阴影叠加，例如内外双线：box-shadow: 0 0 0 1px #000, 0 0 0 3px #eee;。

3、该方式不触发重排（reflow），适合性能敏感场景，但无法设置边框样式（如dashed）。