在制作静态网页时，我们常常需要把一段文字、图片或者整个页面主体框起来，让结构更清晰。HTM作为HTML文件的早期扩展名，其语法与HTML完全一致，因此为HTM内容设置边框，实际上就是利用层叠样式表中的盒模型规则，为对应的元素添加边框属性。
一、使用内联样式快速添加边框
最简单直接的方式是给具体的HTML标签写上style属性，在属性值里声明border。这种方法不需要额外定义选择器，适合临时调试或者内容极少的页面。比如我们想给一个段落加上黑色实线边框，可以这样写：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联边框示例</title>
</head>
<body>
<p style="border:2px solid #333; padding:10px;">
这是一个带有黑色实线边框的段落，内边距让文字不贴边。
</p>
</body>
</html>
上面的代码里，border:2px solid #333表示边框宽度为2像素、线条为实线、颜色为深灰色。如果只写border而不写padding，文字会紧贴边框，视觉上比较拥挤。内联样式的优点是没有额外的文件依赖，但缺点也十分明显：当页面有多个元素需要相同边框时，必须重复书写，后期修改要逐个替换，维护成本很高。
此外，内联样式的优先级高于内部样式表和外部样式表，如果后续想用更规范的方案统一控制，可能会被内联规则覆盖，造成样式冲突。因此，仅建议在写demo或一次性页面时使用这种方式。
二、通过内部样式表统一定义边框类
如果HTM文件稍具规模，更推荐在head区域使用style标签定义样式规则。我们可以声明一个类选择器，把边框样式集中管理，然后在正文里通过class属性引用。这样既保持了清晰的结构，也方便整体调整。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内部样式表边框</title>
<style>
.box-border {
border: 1px dashed #666;
padding: 15px;
margin: 20px auto;
width: 80%;
}
</style>
</head>
<body>
<div class="box-border">
这个div使用了内部样式定义的虚线边框，宽度占页面八成并居中。
</div>
<div class="box-border">
另一个同样式容器，修改样式只需改一处。
</div>
</body>
</html>
在这个例子中，我们定义了.box-border类，边框为1像素灰色虚线，同时设置了内边距和外边距。所有加上class="box-border"的容器都会自动应用该边框。这种写法的好处是样式与结构分离，修改边框颜色时只需要改style块里的一行代码，全部元素同步更新。
需要注意，HTM文件如果是在本地直接双击打开，内部样式表依然能生效，因为它跟随文档一同加载。但如果将来要把多个HTM页面做成站点，每个文件都写一遍style会造成冗余。此时就应该考虑外部样式表。
三、借助外部CSS文件实现多页复用
当我们有很多HTM页面都需要相同的边框风格，最好的做法是把样式写进一个独立的.css文件，再用link标签引入。这样浏览器会缓存该CSS，提升加载速度，也真正实现了样式复用。
<!-- page.htm 文件内容 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外部样式边框</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="card">
内容卡片，边框由外部CSS控制。
</section>
</body>
</html>
对应的style.css可以这样写：
.card {
border: 2px solid #2c7be5;
border-radius: 6px;
padding: 20px;
background: #fafafa;
}
这里我们不仅设置了边框，还用border-radius做了圆角，让卡片更柔和。外部样式表的优势在于，假如站点有五十个HTM页面，全部引用同一个CSS，设计师只需调整一个文件就能改变全站边框视觉。缺点是如果CSS路径写错或者文件丢失，所有页面边框都会消失，因此部署时要确认href指向正确。
对于使用表格布局的老式HTM，要特别注意边框的叠加问题。若给每个td都设border，相邻单元格之间会出现双线。正确方式是在table上设border-collapse:collapse，再统一设定边框，才能呈现单线效果。
四、边框属性细节与常见误区
边框其实由三个基础属性组成：宽度、风格、颜色。我们可以分开写，也可以合并。常见风格包括solid实线、dashed虚线、dotted点线、double双线等。以下代码展示了分边设置的技巧：
<div style="border-top:3px solid red; border-bottom:1px solid blue; border-left:0; border-right:0;">
只有上下边框，且颜色宽度不同。
</div>
很多初学者误以为边框会撑大元素的可视尺寸，其实在标准盒模型下，如果设置了box-sizing:content-box（默认值），border和padding都会加在设定的宽高之外；而如果改成box-sizing:border-box，边框和 padding 会包含在宽高内部，布局更可控。建议在现代HTM页面中全局设置：
* {
box-sizing: border-box;
}
最后提醒，HTM本质是文本文件，边框效果完全依赖浏览器解析CSS。如果用了非常古老的浏览器，某些边框风格可能渲染不一致，但如今已极少遇到。掌握上述三种方法，你就能在任何HTM内容外轻松加上合适边框。