枠線の形式を指定する

border-top-style: 形式
 ⇔　上の枠線の形式
border-bottom-style:　形式
 ⇔　下の枠線の形式
border-left-style:　形式
 ⇔　左の枠線の形式
border-right-style:　形式
 ⇔　右の枠線の形式
border-style:　形式
 ⇔　上・右・下・左の枠線の形式

これらのプロパティは枠線の形式を設定します。
「border-style」を利用すると、上下左右の枠線の形式を一度に設定することが出来ます。
その場合、値を半角スペースで区切って指定しますが、与えられた値の個数によって、
次の様に枠線の形式が設定されます。
●値が１つの場合
●値が２つの場合
●値が３つの場合
●値が４つの場合		 値１⇒上下左右
値１⇒上下　値２⇒左右
値１⇒上　値２⇒左右　値３⇒下
値１⇒上　値２⇒右　値３⇒下　値４⇒左
「none」と「hidden」はどちらも枠線を表示せず、枠線の太さも０に設定します。ただし、
テーブルのセルの枠線として重なり合った場合には、「none」は他の値を優先し、
「hidden」は自分自身の値を優先します。この値の初期値は「none」です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>CSS覚書</title>
<style type="text/css">
<!--
body {
color: #ff6600;
margin: 10
}
p {
text-align: center;
font-weight: bold;
padding: 0.5em;
border: solid 8px #ff3300;
}
#sample1 { border-style: none }
#sample2 { border-style: solid }
#sample3 { border-style: double }
#sample4 { border-style: dashed }
#sample5 { border-style: dotted }
#sample6 { border-style: groove }
#sample7 { border-style: ridge }
#sample8 { border-style: inset }
#sample9 { border-style: outset }

h1 { text-align: center }
-->
</style>
</herd>
<body>
<h1>枠線の形式を指定する</h1>
<p id="sample1">none</p>
<p id="sample2">solid</p>
<p id="sample3">double</p>
<p id="sample4">dashed</p>
<p id="sample5">dotted</p>
<p id="sample6">groove</p>
<p id="sample7">ridge</p>
<p id="sample8">inset</p>
<p id="sample9">outset</p>

</body>
</html>