border表示边框。

边框有三个方面的特征：边框的宽度、边框的样式、边框的颜色。对于一个二维的盒子，上下左右四个方向都可以有边框。

综合上面的特征，CSS里面提供如下相关属性：

• border-width
  设置四边边框的宽度
• border-style
  设置四边边框的样式
• border-color
  设置四边边框的颜色
• border
  设置四边的边框，包括（宽度、样式、颜色）
• border-top
  设置上边的边框，包括（宽度、样式、颜色）
• border-top
  设置上边的边框，包括（宽度、样式、颜色）
• border-top-width
  设置上边的边框的宽度
• border-top-style
  设置上边的边框的样式
• border-top-color
  设置上边的边框的颜色
• border-bottom
  设置下边的边框，包括（宽度、样式、颜色）
• border-bottom-width
  设置下边的边框的宽度
• border-bottom-style
  设置下边的边框的样式
• border-bottom-color
  设置下边的边框的颜色
• border-left
  设置左边的边框，包括（宽度、样式、颜色）
• border-left-width
  设置左边的边框的宽度
• border-left-style
  设置左边的边框的样式
• border-left-color
  设置左边的边框的颜色
• border-right
  设置右边的边框，包括（宽度、样式、颜色）
• border-right-width
  设置右边的边框的宽度
• border-right-style
  设置右边的边框的样式
• border-right-color
  设置右边的边框的颜色

border、border-top、border-bottom、border-left、border-right这5个属性的使用格式是一样的，如下：

property : border-width border-style border-color

border-width取值有如下四类：

• length
  length是带单位的数字，比如50px。如果取值是0，可以省略单位。
• percent
  percent是带%的数字，比如50%。如果取值是0，可以省略%。
• auto
  如果取值是auto，表示看它的内容，内容有多大就多大。
• inherit
  inherit是继承的意思。如果取值是inherit，表示看它与它的父容器用一样大。

在CSS里面，凡是与尺寸相关的属性，通常都会有这四类取值。

示例：

.panel {
    border: 0.5px solid #f0f0f4;
}

.panel {
    border-width: 0.5px;
    border-style: solid;
    border-color: #f0f0f4;
}

.line {
    width : 100%;
    height: 0;
    border-top: 0.5px solid #f0f0f4;
}

.line {
    width : 100%;
    height: 0;
    border-top-width: 0.5px;
    border-top-style: solid;
    border-top-color: #f0f0f4;
}

利用border相关属性，配合上width、height等可以制作出其他形状。

盒子是四四方方的，但是很多时候，使用圆或者圆角更好看，border-radius就是给盒子的四个角设置弧度的。 让盒子看起来圆滑而不是尖锐的。

border-radius相关的属性是CSS3中加入的，IE8并不支持这些属性。

border-radius相关的属性如下：

• border-radius
  设置四个角的圆弧的半径
• border-top-left-radius
  设置坐上角的圆弧的半径
• border-top-right-radius
  设置右上角的圆弧的半径
• border-bottom-left-radius
  设置左下角的圆弧的半径
• border-bottom-right-radius
  设置右下角的圆弧的半径

示例1：

.panel {
    border-radius : 6px;
}

.panel {
    border-top-left-radius : 6px;
    border-top-right-radius : 6px;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
}

示例2：

.circle-with-border {
    width         : 60px;
    height        : 60px;
    border-radius : 30px;
    border        : 5px solid white;
}

当把元素的宽度和高度设置为一样大，就是一个正方形，再给四个角设置圆弧的半径是正方形宽度的一半， 就变成圆形了。设置border是为了好看，也可以不设置。