border: ***; border-***: ***;
- ブラウザ
- 特性
- border
- border-***
border と border-*** は、境界線の太さ、色、スタイルを一括で指定するプロパティです。
border… 上下左右の境界線を一括で指定border-***… 上下左右の境界線を個別に指定 （*** の部分には、top、right、bottom、left が入ります）
上記のように、上下左右をまとめて指定する方法と、それぞれを個別に指定する方法があります。
div.example1 {
border: thick #ff0000 solid;
}
div.example2 {
border-top: 2px #85b9e9 solid;
border-right: 4px #bde9ba double;
border-bottom: 6px #ffd37d dotted;
border-left: 8px #d1d1d1 dashed;
}
border … 上下左右を一括で指定
| プロパティ名 | 値 | 説明 |
|---|---|---|
| border | 以下を参照 | 境界線（太さ、色、スタイル）を指定 |
【指定方法】
border: thick #ff0000 solid;
| border: | thick | #ff0000 | solid | ; |
|---|---|---|---|---|
| 太さ | 色 | スタイル |
それぞれの値は、半角スペースで区切って記述します。
記述する順序は自由で、必要のない指定は省略することもできます。（省略した場合は初期値が適用されます）
※境界線スタイルの指定を省略すると、境界線が表示されなくなってしまいます（初期値が none なので）。境界線を表示する場合は、この指定を省略しないようにしてください。
border-*** … 上下左右を個別に指定
| プロパティ名 | 値 | 説明 |
|---|---|---|
| border-top | 以下を参照 | 上の境界線（太さ、色、スタイル）を指定 |
| border-right | 以下を参照 | 右の境界線（太さ、色、スタイル）を指定 |
| border-bottom | 以下を参照 | 下の境界線（太さ、色、スタイル）を指定 |
| border-left | 以下を参照 | 左の境界線（太さ、色、スタイル）を指定 |
【指定方法】
border-top: 2px #85b9e9 solid;
border-right: 4px #bde9ba double;
border-bottom: 6px #ffd37d dotted;
border-left: 8px #d1d1d1 dashed;
値の指定方法は border と同じです。
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
h1 {
border: medium #ff0000 dotted;
}
h2 {
border-top: medium red dotted;
border-right: thick blue double;
border-bottom: medium green dashed;
border-left: thick gray groove;
}
span {
border-top: 2px #ff0000 dotted;
border-bottom: 2px #ff0000 dotted;
}
</style>
</head>
<body>
<h1>赤い点線の境界線</h1>
<h2>上下左右に異なる境界線を指定</h2>
<p>上下の<span>境界線</span>のみ表示します。</p>
</body>
表示例
赤い点線の境界線
上下左右に異なる境界線を指定
上下の境界線のみ表示します。
- サイト内検索
