border具有四个属性：width / style / color / inherit

border-style类型一共有9个效果样式和一个继承样式，效果样式如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>border-style</title>
	<style type="text/css">
		div{margin:50px;background:blue;width:400px;height:400px;border-color:red;align:center;color:#fff;font-size: 30px;border-width: 20px;}
		#div1{border-style:none;}
		#div2{border-style:hidden;}
		#div3{border-style:dotted;}
		#div4{border-style:dashed;}
		#div5{border-style:solid;}
		#div6{border-style:double;}
		#div7{border-style:groove;}
		#div8{border-style:ridge;}
		#div9{border-style:inset;}
		#diva{border-style:outset;}

	</style>
</head>
<body>
	<div id="div1">none</div>
	<div id="div2">hidden</div>
	<div id="div3">dotted</div>
	<div id="div4">dashed</div>
	<div id="div5">solid</div>
	<div id="div6">double</div>
	<div id="div7">groove</div>
	<div id="div8">ridge</div>
	<div id="div9">inset</div>
	<div id="diva">outset</div>
	<div id="diva">outset</div>
</body>
</html>

　　继承样式如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{background:blue;}
		.father{
			width:400px;height:400px;border:20px ridge red;
		}
		.son{
			width:150px;height:150px;border:inherit;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>