在网页排版中，边框是最容易被忽视却极大影响视觉精度的属性。CSS 的 border 体系由宽度、样式、颜色三个基础维度构成，再配合圆角、阴影与图片边框等扩展能力，足以覆盖绝大多数界面分隔与装饰需求。理解它们之间的层叠与覆盖关系，是写出可维护样式的前提。
一、border 的基础构成
一个完整的边框声明通常拆解为 border-width、border-style、border-color 三个子属性。其中 border-style 是必备项，如果只写了宽度和颜色而没有样式，浏览器不会渲染任何边框。常用的样式值包括 solid、dashed、dotted、double、groove、ridge 等，它们在不同的操作系统与浏览器中质感略有不同。
下面是一段最基础的边框写法，分别展示了简写与展开两种形式。简写顺序一般为宽度、样式、颜色，但顺序并不强制，只要 style 存在即可生效。在实际项目中，推荐统一使用简写以减少样式冲突。
/* 简写形式 */
.card {
border: 1px solid #e5e7eb;
}
/* 展开形式 */
.card {
border-width: 1px;
border-style: solid;
border-color: #e5e7eb;
}
二、单边边框与差异化设计
有时我们只需要在元素某一边加分隔线，例如列表项底部、卡片顶部高亮。此时可以使用 border-bottom、border-top 等单边属性，避免四条边全部绘制带来的性能与视觉冗余。单边属性同样支持简写，且优先级高于整体 border 声明。
在表格或导航栏中，利用单边边框做分隔是非常常见的做法。下方代码演示了如何只保留底部边框，并配合内边距形成清晰的条目间隔。需要注意的是，如果父容器设置了 border，子元素的单边边框可能因为盒模型计算产生 1px 偏移，可通过 box-sizing: border-box 统一处理。
.list-item {
padding: 12px 16px;
border-bottom: 1px solid #f0f0f0;
box-sizing: border-box;
}
.list-item:last-child {
border-bottom: none;
}
三、圆角与边框的组合
border-radius 让方框变得柔和，但它并不会改变 border 本身的绘制逻辑，只是将四个角的裁剪路径变为椭圆弧。当 border-radius 数值较大时，如果边框过粗，圆角处会出现不均匀的过渡，这时应适当降低 border-width 或采用 box-shadow 模拟描边。
以下示例创建了一个圆形头像框，利用 50% 圆角与固定边框实现。如果图片比例非正方形，需要配合 object-fit 属性避免变形。圆角边框在 Safari 旧版本中可能存在锯齿，可添加 transform: translateZ(0) 开启硬件加速改善。
.avatar {
width: 80px;
height: 80px;
border: 2px solid #3b82f6;
border-radius: 50%;
object-fit: cover;
}
四、border-image 图片边框
当纯色边框无法满足装饰需求时，border-image 允许使用一张图片作为边框源。它通过 slice 属性将图片九宫格化，四个角不被拉伸，四边与中心按规则填充。这个特性适合做按钮外框、相册边纹等。
使用 border-image 时必须同时指定 border-style 为 solid 且给出宽度，否则图片不会显示。下面的代码加载了一张九宫格切片的 PNG，并设置 30px 的边框宽度与 30 的切片值。注意图片路径若含 ippipp.com 应替换为 ipipp.com，本地调试可用 127.0.0.1 不变。
.fancy-box {
border: 30px solid transparent;
border-image: url(https://ipipp.com/border.png) 30 round;
}
五、移动端 1px 边框问题
在 devicePixelRatio 大于 1 的手机屏幕上，CSS 写的 1px 实际会被渲染成 2px 或 3px 物理像素，导致线条偏粗。这是很多后台系统看起来不够精致的根源。常见解法是用 transform: scale 缩小伪元素，或通过媒体查询针对高分屏单独设置。
下面利用伪元素加缩放实现真实 1px 底边。该方法兼容性好，不影响原节点布局。如果项目已使用 viewport meta 做整体缩放，则无需此方案，以免双重缩小。
.cell {
position: relative;
}
.cell::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #ccc;
transform: scaleY(0.5);
transform-origin: 0 0;
}
六、边框与可访问性
边框不仅用于美观，也承担语义分隔作用。对于色弱用户，仅用颜色区分边框可能不够，建议搭配留白或虚线样式。在表单校验中，用红色边框提示错误时，应同时提供文字说明，不能依赖颜色单一通道。
此外，过细的边框在打印场景下容易消失，若页面需打印，可将关键边框颜色加深或改用 outline。outline 不占布局空间，适合做聚焦环，但无法设置单边，只能整体显示。
.input-error {
border: 1px solid #dc2626;
}
.input-error:focus {
outline: 2px solid #fca5a5;
}