枠線をまとめて指定する

border-top: 枠線関連のプロパティの値
 ⇔　上の枠線の設定
border-bottom:　枠線関連のプロパティの値
 ⇔　下の枠線の設定
border-left:　枠線関連のプロパティの値
 ⇔　左の枠線の設定
border-right:　枠線関連のプロパティの値
 ⇔　右の枠線の設定
border:　枠線関連のプロパティの値
 ⇔　上・右・下・左の枠線に同じ値を設定

[枠線関連のプロパティの値]
border-color 　　　　　枠線の色で指定できる値
border-width 　　　　　枠線の太さで指定できる値
border-style　　　　　　枠線の形式で指定できる値

これらのプロパティは枠線関連のプロパティ値をまとめて設定します。
必要な値を任意の順序で半角スペースで区切って指定します。
指定しなかった値については、初期値が指定されたことになります。
なお、「border」を使用して上下左右に別々の設定をすることは出来ません。

<!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;
margin: 2em;
padding: 1em
}
#sample1 { border: double 3px #ff3300 }
#sample2 { border: dashed 2px #ffcc00 }
#sample3 { border: dotted 7px #339933 }
#sample4 { border: ridge 10px #3366cc }
}
h1 { text-align: center }
-->
</style>
</herd>
<body>
<h1>枠線をまとめて指定する</h1>
<p id="sample1">border: double 3px #ff3300</p>
<p id="sample2">border: dashed 2px #ffcc00</p>
<p id="sample3">border: dotted 7px #339933</p>
<p id="sample4">border: ridge 10px #3366cc</p>

</body>
</html>