border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-style兼容性很好，基本所有浏览器都兼容
border-style拥有一下属性值
| 值 | 描述 |
|---|---|
| none | 定义无边框。 |
| hidden | 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
| inherit | 规定应该从父元素继承边框样式。 |
实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>border-style:double</title>
<link rel="stylesheet" href="">
<style type="text/css">
div{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
margin-bottom: 20px;
}
div.box1{
height: 50px;
border: 6px double red;
}
div.box2{
height: 50px;
border: 12px double red;
}
div.box3{
height: 50px;
border: 24px double red;
}
</style>
</head>
<body>
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
<div class="box3">我是box3</div>
</body>
</html>效果如下：
有图中咱可以看出“双线double” 实际上有三部分组成：
也就是效果图中所示那样
| border-width | 外框宽度 | 中间透明宽度 | 内框宽度 |
|---|---|---|---|
| 6px | 2px | 2px | 2px |
| 12px | 4px | 4px | 4px |
| 24px | 8px | 8px | 8px |
我给定的border宽度正好是3的倍数，如果不是三的倍数，那么外框，中间，内框的宽度该如何分配呢？效果图如下：
可以看出他们之间是有细微差别的，外框宽度、中间透明宽度、内框宽度之间相差1px。
| border-width | 外框宽度 | 中间透明宽度 | 内框宽度 |
|---|---|---|---|
| 7px | 2px | 3px | 2px |
| 8px | 3px | 2px | 3px |
| 9px | 3px | 3px | 3px |
border-style：double ；实用如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div.box{
background-color: gray;
padding: 20px;
}
div.nav{
width: 30px;
height: 4px;
border-top: 12px double ;
border-bottom: 4px solid black;
color: red;
}
div.nav:hover{
color: white;
border-bottom-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="nav"></div>
</div>
</body>
</html>