| プロパティ名 | 値 | 説明 | 適用対象 | 継承 |
|---|---|---|---|---|
| border-top-style: | 種類 | 上の枠線の種類 | すべての要素 | なし |
| border-bottom-style: | 種類 | 下の枠線の種類 | すべての要素 | なし |
| border-left-style: | 種類 | 左の枠線の種類 | すべての要素 | なし |
| border-right-style: | 種類 | 右の枠線の種類 | すべての要素 | なし |
| border-style: | 種類 | 上下左右の枠線の種類 | すべての要素 | なし |
| 値 | 説明 | |
|---|---|---|
| 枠線の種類 | dotted | 点線で表示 |
| dashed | 破線で表示 | |
| solid | 実践で表示 | |
| double | 二重線で表示 | |
| groove | 凹んで見えるような線で表示 | |
| ridge | 浮き出して見えるような線で表示 | |
| inset | 枠線の内側が凹んで見えるような線 で表示 | |
| outset | 枠線の内側が浮き出して見えるような線 で表示 | |
| hidden | 枠線を非表示にします | |
| none | 枠線を非表示にします。 枠線の幅（border-width)も0になります （デフォルト） |
| border-color: | 枠線の色 |
| border-style:値 | 上下左右 |
| border-style:値 値 | 上下 左右 |
| border-style:値 値 値 | 上下 左右 下 |
| border-style:値 値 値 値 | 上 右 下 左 |
border-top-style, border-bottom-style, border-left-style, border-right-style,border-styleプロパティは、枠線の種類を設定します。
border-colorを利用すると、上下左右の枠線の種類を一度に設定することができます。
値を半角スペースで区切って指定しますが、与えられた値の個数によって、上記のように枠線の色が設定されます。
border-colorを利用すると、上下左右の枠線の種類を一度に設定することができます。
値を半角スペースで区切って指定しますが、与えられた値の個数によって、上記のように枠線の色が設定されます。
サンプルソース
<!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-style: dashed;}
#sampl02{border-style: solid;}
#sampl03{border-style: double;}
#sampl04{border-style: groove; }
#sampl05{border-style: ridge;}
#sampl06{border-style: inset;}
#sampl07{border-style: outset; }
#sampl08{border-style: hidden;}
#sampl09{border-style: none;}
-->
</style>
</head>
<body>
<p id="sampl01"><b>上下左右ボーダー破線で表示</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。</p>
<p id="sampl02"><b>上下左右ボーダー実践で表示</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。</p>
<p id="sampl03"><b>上下左右ボーダー二重線で表示</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。</p>
<p id="sampl04"><b>上下左右ボーダー凹んで見えるような線で表示</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。</p>
<p id="sampl05"><b>上下左右ボーダー浮き出して見えるような線で表示</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。</p>
<p id="sampl06"><b>上下左右ボーダー枠線の内側が凹んで見えるような線で表示</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。</p>
<p id="sampl07"><b>上下左右ボーダー枠線の内側が浮き出して見えるような線で表示</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。</p>
<p id="sampl08"><b>枠線を非表示にします</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。</p>
<p id="sampl09"><b>枠線を非表示にします。枠線の幅（border-width)も0になります</b>
日光東照宮（にっこうとうしょうぐう）は栃木県日光市にある神社。</p>
</body>
</html>
