CSS border 速查：边框、圆角、单边、虚线与常见效果（含 8 个示例）

border 看起来简单（“加个边框”），但新手经常被这些问题卡住：

这篇文章把 border 的常用写法整理成“速查 + 示例”，你可以直接复制到项目里用。

border 最常用的简写（90% 场景够用）

border 简写顺序不强制，但通常按：宽度 → 样式 → 颜色。

.box {
  border: 1px solid #e5e7eb;
}

你也可以拆开写：

.box {
  border-width: 1px;
  border-style: solid;
  border-color: #e5e7eb;
}

.item {
  border-bottom: 1px solid #e5e7eb;
}

.note {
  border-left: 4px solid #3b82f6;
  padding-left: 12px;
}

.card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.pill {
  border-radius: 9999px;
}

如果你要“上方圆角、下方直角”：

.panel {
  border-radius: 12px 12px 0 0;
}

默认情况下（box-sizing: content-box），元素设置 width/height 指的是内容区；加了 padding/border 会把外观尺寸变大。

解决方式通常是：

* {
  box-sizing: border-box;
}

border-box 下，width 包含内容 + padding + border，布局会更稳定。

.divider {
  border-bottom: 1px dashed #d1d5db;
}

虚线想更细腻，通常需要：

如果你希望“更可控的虚线”，可以用背景渐变模拟，但那属于进阶玩法。

outline 不占空间，不会影响布局尺寸，常用于焦点可访问性样式：

.button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

如果你发现“加边框导致按钮跳动”，可以考虑用 outline 做交互态强调。

.card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.card:hover {
  border-color: #93c5fd;
}

.list > li {
  border-bottom: 1px solid #f3f4f6;
}

.list > li:last-child {
  border-bottom: 0;
}

.callout {
  border-left: 4px solid #22c55e;
  padding-left: 12px;
}

.btn {
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 14px;
}

.avatar {
  border: 2px solid #fff;
  border-radius: 9999px;
}

.input {
  border: 1px solid #d1d5db;
  border-radius: 10px;
}

.input:focus {
  border-color: #2563eb;
  outline: none;
}

.glow {
  border: 1px solid rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
  border-radius: 12px;
}

默认 box-sizing: content-box 下，width 不包含 border/padding。建议全局使用 box-sizing: border-box。

用 border-bottom: 1px solid ...，并对最后一项去掉底边。

border 是明确的边界线；box-shadow 是阴影/发光效果，通常不占空间，视觉上更柔和。

一般 1px 已够用；如果追求极致，可以用 transform 缩放或背景渐变模拟，但成本更高。