| プロパティ名 | 値 | 説明 | 適用対象 | 継承 |
|---|---|---|---|---|
| border-top: | border-color, border-width, border-style で指定できる値 | 上の枠線 の設定 | すべての 要素 | なし |
| border-bottom: | border-color, border-width, border-style で指定できる値 | 下の枠線 の設定 | すべての 要素 | なし |
| border-left: | border-color, border-width, border-style で指定できる値 | 左の枠線 の設定 | すべての 要素 | なし |
| border-right: | border-color, border-width, border-style で指定できる値 | 右の枠線 の設定 | すべての 要素 | なし |
| border: | border-color, border-width, border-style で指定できる値 | 上下左右の枠線 の設定 | すべての 要素 | なし |
border-top, border-bottom, border-left, border-right, borderプロパティは、枠線関連のプロパティの値まとめて設定します。
必要な値を任意の順序で半角スペースで区切って指定します。指定しなかった値については、初期値が指定されたことになります。
なお、borderを使用して上下左右に別々に設定することはできません。
必要な値を任意の順序で半角スペースで区切って指定します。指定しなかった値については、初期値が指定されたことになります。
なお、borderを使用して上下左右に別々に設定することはできません。
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<style type="text/css">
<!--
body{margin:0}
p{text-align:center;
font-size:1.1em;
background-color:#FFD700;
color:red;
width:600px;
margin-left:auto;
margin-right:auto;
border-width: 5px;
border-color:red;}
b{font-size:1.2em;
color:black;
}
#sampl01{border:dashed 5px blue;}
#sampl02{border:solid 5px black;}
#sampl03{border:double 5px red;}
#sampl04{border-top:groove 5px #FF8C00;
border-bottom:dotted 5px green;
border-left:solid 5px #800080;
border-right:inset 5px #FF00FF;
}
-->
</style>
</head>
<body>
<p id="sampl01"><b>border:dashed 5px blueで表示</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。</p>
<p id="sampl02"><b>border:solid 5px blackで表示</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。</p>
<p id="sampl03"><b>border:double 5px redで表示</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。</p>
<p id="sampl04"><b>border-top:groove 5px #FF8C00
border-bottom:dashed 5px #7FFF00
border-left:solid 5px #800080
border-right:ridge 5px #FF00FFで表示</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。</p>
</body>
</html>
