border

元素盒子模型中的边框。

Border Style

border-style设置border的类型，它是border-xxx-style的复合属性，xx表示”top”,”right”,”bottom”,”left”。 有以下这些border-style。

none border

a dotted border

a dashed border

a solid border

a double border

a groove border

a ridge border

a inset border

a outset border

A hidden border.

border-style可以设置1-4个值，表示不同的方向的border的类型：

• border-style: dotted solid double dashed;
  • top border is dotted
  • right border is solid
  • bottom border is double
  • left border is dashed
• border-style: dotted solid double;
  • top border is dotted
  • right and left borders are solid
  • bottom border is double
• border-style: dotted solid;
  • top and bottom borders are dotted
  • right and left borders are solid
• border-style: dotted;
  • all four borders are dotted

Border Width

border-width设置border的宽度，如果border-style:none会无效。语法：

border-width: thin | medium | thick | length | inherit;

border-width是border-xx-width的复合属性，xx表示”top”,”right”,”bottom”,”left”。border-width同样可以设置1-4个值，跟border-style类似。

Border Color

border-color设置border的颜色。border-color是border-xx-color的复合属性，xx表示”top”,”right”,”bottom”,”left”。border-color同样可以设置1-4个值，跟border-style类似。

Border - Shorthand property

border是border-style、border-width、border-color 的复合属性，它们可以省略某项而且顺序不重要。比如：

border: red dotted 4px 5px 3px;

border-top、border-right、border-bottom、border-left是设置不同方向的border的复合属性，可以省略某项而且顺序不重要。比如：

border-top: red dotted 4px;

outline

元素的轮廓，它不属于盒子模型的任意一部分，所以不算在元素总的width和height。它在border的外面,如果有margin是在margin上面的。

它跟border一样有三个复合属性outline-style、outline-color、outline-width，它们的值跟border一样，不同的是它们只能设置一个值，不能针对单个方向设置，所以方向的轮廓都是一样的。