边框

属性	说明
border-width	边框宽度
border-style	边框风格
border-color	边框颜色

border-width

设置边框宽度。

• thin，细边框
• medium，默认值，中等边框
• thick，粗边框
• length

border-style

设置边框风格。

• none，默认值
• hidden，隐藏边框，大部分情况下等价于 none，除了表格，hidden 用于解决表格边框冲突
• dotted，点状
• dashed，虚线
• solid，实线
• double，双线
• groove，3D 凹槽
• ridge，3D 隆起
• inset
• outset

具体效果查看 CodePen。

border-color

设置边框颜色。

• transparent，默认值，透明
• color 具体颜色

缩写规则

• 一取值：表示 4 条边同时设置
• 两取值：「上下」、「左右」
• 三取值：「上」、「左右」、「下」
• 四取值：「上」、「右」、「下」、「左」

另外，我们还可以使用带方向关键字的 border-*、border-*-width、border-*style、border-*color，* 的取值为 left、right、top、bottom。

CSS3 新增特性

属性	说明
border-image	图片边框
border-radius	边框圆角

这里主要来介绍一下 border-radius。

基本使用

border-radius 的作用就是设置边框圆角半径。

取一值

border-radius: 5px;

表示边框四个角的圆角半径为 5px

取两值

border-radius: 5px 30px;

分别是「主对角线」和「副对角线」对应的边框圆角半径

取三值

border-radius: 5px 30px 60px;

分别是「左上」、「副对角线」、「右下」对应的边框圆角半径

取四值

border-radius: 5px 30px 60px 90px;

从「左上」开始顺时针顺序对应的边框圆角

圆角的水平半径与垂直半径

具体可以参考下图：

我们可以设置第二组值作为垂直半径：

border-radius: 5px 30px 60px / 20px;

表示「左上」、「副对角线」、「右下」的圆角水平半径分别为 5px 30px 60px，垂直半径为 20px。

需要注意的是，但凡「水平半径」和「垂直半径」其中有一个取值为 0 ，那么对应方位的边框角一定是直角。

单个圆角的设置

除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3 提供四个单独的属性：

　　 border-top-left-radius 　　 border-top-right-radius 　　 border-bottom-right-radius 　　 border-bottom-left-radius

每个属性都可以取 1 - 2 个值，取 1 个值表示水平/垂直半径相同，取 2 个值分别表示该方位圆角的水平/垂直半径。