border と border-*** は、枠線の太さ、色、種類をひとまとめに指定するプロパティです。
上下左右の枠線をまとめて指定する方法と、それぞれを個別に指定する方法があります。
border … 上下左右をまとめて指定します。
border-*** … 上下左右を個別に指定します。（*** の部分には、top、right、bottom、left が入ります）
div {
border: thick red solid;
}
p {
border-top: 2px #85b9e9 solid;
border-right: 4px #bde9ba double;
border-bottom: 6px #ffd37d dotted;
border-left: 8px #d1d1d1 dashed;
}
border … 上下左右をまとめて指定する
| border | 枠線（太さ、色、スタイル）を指定します |
|---|
【指定方法】
| border: | thick | red | solid | ; |
|---|---|---|---|---|
| 太さ | 色 | スタイル |
それぞれの値は、半角スペースで区切って記述します。
記述する順番は自由で、必要のない指定は省くこともできます。
※省いた部分はデフォルトが適用されます。
※枠線を表示させる場合は、枠線スタイルの指定は省かないようにします（none がデフォルトなので）。
border-*** … 上下左右を個別に指定する
| border-top | 上の枠線（太さ、色、スタイル）を指定します |
|---|---|
| border-right | 右の枠線（太さ、色、スタイル）を指定します |
| border-bottom | 下の枠線（太さ、色、スタイル）を指定します |
| border-left | 左の枠線（太さ、色、スタイル）を指定します |
指定内容は border と同じです。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
h2 {
border-top: medium red dotted;
border-right: thick blue double;
border-bottom: medium green dashed;
border-left: thick gray groove;
}
h3, span {
border: medium red dotted;
}
-->
</style>
</head>
<body>
<h2>上下左右に異なる枠線を指定</h2>
<h3>赤い点線を指定</h3>
<p>赤い点線の<span>枠線</span>を指定します</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
赤い点線の枠線を指定します
