CSS 边框：宽度、样式、颜色与圆角

border 简写

border 在元素周围画一条线，位于内边距和外边距之间。这个简写包含三个部分，顺序随意：宽度、样式和颜色。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

样式是唯一不能省略的部分。它的默认值是 none，所以 border: 2px #2563eb; 什么都画不出来。如果省略颜色，边框会使用元素的文字颜色。

边框样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double 至少需要 3px 才能显示出两条线。groove、ridge、inset 和 outset 会给颜色加上明暗，让它看起来有立体感，在不同浏览器中的效果略有差异。hidden 看起来和 none 一样；两者只在边框合并的表格中才有区别，这一点在 HTML 表格边框页面中有介绍。

单独设置某一条边

每条边都有自己的简写（border-top、border-right、border-bottom、border-left），每个部分也都有按边划分的完整属性，比如 border-top-color。逻辑属性版本 border-inline-start 和 border-block-end 会跟随文字方向：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color、border-width 和 border-style 接受一到四个值，顺序和内边距一样是顺时针：上、右、下、左。

用 border-radius 做圆角

border-radius 会让边框和背景的角都变圆，所以它对完全没有边框的元素也有效。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

带背景的子元素可能会从圆角父元素的角上露出来。给父元素加上 overflow: hidden，就能沿着弧线把它裁掉。

边框与轮廓

轮廓看起来像边框，但它画在边框外面，不占用空间，所以加上轮廓永远不会让任何东西移动。这就是浏览器用轮廓来显示焦点框的原因。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

常见错误

• 没有边框样式。 border: 1px #111827; 和 border-color: red; 什么都画不出来。要加上 solid（或其他样式）。
• 悬停时边框让布局跳动。 用透明边框预留空间，或者改用轮廓或 box-shadow。
• 计算宽度时忘了边框。 在 content-box 下，一个带边框的 width: 100% 元素会超出容器。请使用 box-sizing: border-box。
• 使用 border-radius 后子元素从角上露出来。 给圆角父元素加上 overflow: hidden。
• 用 outline: none 去掉焦点轮廓。 键盘用户需要它；请重新设计轮廓的样式，而不是删掉它。