更多"Try it Yourself"下面的例子。
定义和用法
边框样式属性设置元素的四个边框的风格。 该属性可具有一至四个值。
例子：
- border-style:dotted solid double dashed;
- 顶部边框点缀
- 右边框是实
- 下边框是双
- 左边框为虚线
- border-style:dotted solid double;
- 顶部边框点缀
- 左右边框是实
- 下边框是双
- border-style:dotted solid;
- 顶部和底部边框点缀
- 左右边框是实
- border-style:dotted;
- 所有四个边框点缀
| 默认值： | none |
|---|---|
| 遗传： | no |
| 动画： | no. Read about animatable |
| 版： | CSS1 |
| JavaScript语法： | object .style.borderStyle="dotted double" Try it |
浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| border-style | 1.0 | 4 | 1.0 | 1.0 | 3.5 |
Note:值"hidden"不支持IE7和更早版本。 IE8需要一个！DOCTYPE。 IE9及更高版本支持"hidden" 。
CSS语法
border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;属性值
| 值 | 描述 | 播放 |
|---|---|---|
| none | 默认值。 指定无边框 | 播放 ” |
| hidden | 同为"none" ，除了在边境解决冲突表格元素 | 播放 ” |
| dotted | 指定虚线边框 | 播放 ” |
| dashed | 指定一个虚线框 | 播放 ” |
| solid | 指定了坚实的边界 | 播放 ” |
| double | 指定双边框 | 播放 ” |
| groove | 指定3D沟槽的边界。 效果依赖于边框颜色值 | 播放 ” |
| ridge | 指定3D脊边框。 效果依赖于边框颜色值 | 播放 ” |
| inset | 指定3D插图边框。 效果依赖于边框颜色值 | 播放 ” |
| outset | 指定3D突出边框。 效果依赖于边框颜色值 | 播放 ” |
| initial | 将此属性设置为默认值。 阅读关于初始 | 播放 ” |
| inherit | 继承其父元素此属性。 阅读关于继承 |
更多示例
例
在一个元件的每一侧设置不同的边框：
p.one {border-style: dotted solid dashed double;}
p.two {border-style:
dotted solid dashed;}
p.three {border-style: dotted solid;}
p.four
{border-style: dotted;} 试一试» 相关页面
CSS教程： CSS边框
HTML DOM参考： borderStyle property