border

CSS 的 border 属性是一个用于设置各种单独的边界属性的简写属性。border 可以用于设置一个或多个以下属性的值：border-width、border-style、border-color。

和所有的简写属性一样，如果有缺省值会被设置成对应属性的初始值。同时需要注意设置 border 对border-image属性的影响，虽然 border 属性不能设置这个属性，但会把该属性重置为初始值 none。这使得我们可以用 border 属性去重置整个样式表中的 border 设置。因为 W3C 计划在未来的标准中保留该属性，因此建议使用该属性重置边框设定。

边界（border）和轮廓（outline）很相似。然而轮廓在以下方面与边界不同：

• 轮廓不占据空间，他们在元素内容之外绘制。
• 根据规范，轮廓不必为矩形，尽管通常是矩形。

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

/* Global values */
border: inherit;
border: initial;
border: unset;

可以使用下面列出的一个，两个或三个值来指定 border 属性。值的顺序无关紧要。

border-width

请看 border-width.

border-style

请看 border-style.

border-color

<color> 可以确定 border 的颜色。如果这个值没有设置，它的默认值是元素的 color 属性值（是文字颜色而非背景色）。请看 border-color。

border = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

HTML

<div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>

CSS

div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

结果