邊框風格屬性(border-style)
這個屬性用來設定上下左右邊框的風格，它的值如下：
none (沒有邊框，無論邊框寬度設為多大)
dotted (點線式邊框)
dashed (破折線式邊框)
solid (直線式邊框)
double (雙線式邊框)
groove (槽線式邊框)
ridge(脊線式邊框)
inset (內嵌效果的邊框)
outset (突起效果的邊框)
示例：分別使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS邊框風格屬性示例
<html>
<head>
<title>邊框風格屬性 border-style </title>
<style type="text/css">
.d1 {border-style:none;}
.d2 {border-style:solid;}
.d3 {border-style:dotted;}
.d4 {border-style:dashed;}
.d5 {border-style:double;}
.d6 {border-style:groove;}
.d7 {border-style:ridge;}
.d8 {border-style:inset;}
.d9 {border-style:outset;}
</style>
</head>
<body>
<div>這個div的CSS邊框風格(border-style)屬性缺省值是none。</div>
<br>
<div class = "d1">這個div的CSS邊框風格(border-style)屬性是none。</div>
<br>
<div class = "d2">這個div的CSS邊框風格(border-style)屬性是solid。</div>
<br>
<div class = "d3">這個div的CSS邊框風格(border-style)屬性是dotted。</div>
<br>
<div class = "d4">這個div的CSS邊框風格(border-style)屬性是dashed。</div>
<br>
<div class = "d5">這個div的CSS邊框風格(border-style)屬性是double。</div>
<br>
<div class = "d6">這個div的CSS邊框風格(border-style)屬性是groove。</div>
<br>
<div class = "d7">這個div的CSS邊框風格(border-style)屬性是ridge。</div>
<br>
<div class = "d8">這個div的CSS邊框風格(border-style)屬性是inset。</div>
<br>
<div class = "d9">這個div的CSS邊框風格(border-style)屬性是outset。</div>
<br>
</body>
</html>
這個div的CSS邊框風格(border-style)屬性缺省值是none。
這個div的CSS邊框風格(border-style)屬性是none。
這個div的CSS邊框風格(border-style)屬性是solid。 直線式邊框
這個div的CSS邊框風格(border-style)屬性是dotted。點線式邊框
這個div的CSS邊框風格(border-style)屬性是dashed。 破折線式邊框
這個div的CSS邊框風格(border-style)屬性是double。 雙線式邊框
這個div的CSS邊框風格(border-style)屬性是groove。槽線式邊框
這個div的CSS邊框風格(border-style)屬性是ridge。脊線式邊框
這個div的CSS邊框風格(border-style)屬性是inset。內嵌效果
這個div的CSS邊框風格(border-style)屬性是outset。 突起效果
這個屬性用來設定上下左右邊框的風格，它的值如下：
none (沒有邊框，無論邊框寬度設為多大)
dotted (點線式邊框)
dashed (破折線式邊框)
solid (直線式邊框)
double (雙線式邊框)
groove (槽線式邊框)
ridge(脊線式邊框)
inset (內嵌效果的邊框)
outset (突起效果的邊框)
示例：分別使用none,dotted, dashed, solid, double, groove, ridge, inset, outset的CSS邊框風格屬性示例
<html>
<head>
<title>邊框風格屬性 border-style </title>
<style type="text/css">
.d1 {border-style:none;}
.d2 {border-style:solid;}
.d3 {border-style:dotted;}
.d4 {border-style:dashed;}
.d5 {border-style:double;}
.d6 {border-style:groove;}
.d7 {border-style:ridge;}
.d8 {border-style:inset;}
.d9 {border-style:outset;}
</style>
</head>
<body>
<div>這個div的CSS邊框風格(border-style)屬性缺省值是none。</div>
<br>
<div class = "d1">這個div的CSS邊框風格(border-style)屬性是none。</div>
<br>
<div class = "d2">這個div的CSS邊框風格(border-style)屬性是solid。</div>
<br>
<div class = "d3">這個div的CSS邊框風格(border-style)屬性是dotted。</div>
<br>
<div class = "d4">這個div的CSS邊框風格(border-style)屬性是dashed。</div>
<br>
<div class = "d5">這個div的CSS邊框風格(border-style)屬性是double。</div>
<br>
<div class = "d6">這個div的CSS邊框風格(border-style)屬性是groove。</div>
<br>
<div class = "d7">這個div的CSS邊框風格(border-style)屬性是ridge。</div>
<br>
<div class = "d8">這個div的CSS邊框風格(border-style)屬性是inset。</div>
<br>
<div class = "d9">這個div的CSS邊框風格(border-style)屬性是outset。</div>
<br>
</body>
</html>
這個div的CSS邊框風格(border-style)屬性缺省值是none。
這個div的CSS邊框風格(border-style)屬性是none。
這個div的CSS邊框風格(border-style)屬性是solid。 直線式邊框
這個div的CSS邊框風格(border-style)屬性是dotted。點線式邊框
這個div的CSS邊框風格(border-style)屬性是dashed。 破折線式邊框
這個div的CSS邊框風格(border-style)屬性是double。 雙線式邊框
這個div的CSS邊框風格(border-style)屬性是groove。槽線式邊框
這個div的CSS邊框風格(border-style)屬性是ridge。脊線式邊框
這個div的CSS邊框風格(border-style)屬性是inset。內嵌效果
這個div的CSS邊框風格(border-style)屬性是outset。 突起效果