Cascading Style Sheets border property.
border は CSSの一括指定プロパティで、ボックスの上下左右のボーダー(境界)のスタイル・太さ・色に対して同じ値をまとめて指定することができます。
このプロパティは以下の CSSプロパティの一括指定です。
各プロパティで指定できる値のうち、必要なものを半角スペースで区切って複数指定できます。指定する順序は自由です。指定しない値は、それぞれのプロパティの初期値になります。
これは、シンプルな使用例です。
HTML source
<p>これは、シンプルな使用例です。</p>
CSS source
p {
border: 10px solid #0188ff;
}
各プロパティの指定する順序は関係ありませんので、上記の使用例では「太さ・スタイル・色」の順でしたが、試しに順番を入れ替えてみます。
CSS source
p {
border: #0188ff solid 10px;
}
プロパティの指定の順番を入れ替えた、シンプルな使用例です。
もちろん、表示に問題はありません。皆さんの都合、書きやすさで順番を入れ替えて差支え無さそうです。
borderプロパティでは、ボーダーのスタイル・太さ・色について上下左右バラバラの指定をすることはできません。上下左右のボーダーを異なったものにする場合には、
または、
で、指定してください。
「 border-style(ボーダーのスタイルの一括指定) 」を設定する場合と同様の値が指定できます。
上記で使った「シンプルな使用例」のスタイル部分のみを書き替えてどのように表示されるか見てみます。
CSS source
p {
border: 10px solid #0188ff;
}
スタイル部分のみを「none」に変更したシンプルな使用例です。
スタイル部分のみを「solid」に変更したシンプルな使用例です。
スタイル部分のみを「double」に変更したシンプルな使用例です。
スタイル部分のみを「dotted」に変更したシンプルな使用例です。
スタイル部分のみを「dashed」に変更したシンプルな使用例です。
スタイル部分のみを「groove」に変更したシンプルな使用例です。
スタイル部分のみを「ridge」に変更したシンプルな使用例です。
スタイル部分のみを「inset」に変更したシンプルな使用例です。
スタイル部分のみを「outset」に変更したシンプルな使用例です。
「 border-width(ボーダーの太さの一括指定) 」を設定する場合と同様の値が指定できます。
ここでは、「シンプルな使用例」の太さ部分のみを書き替えてどのように表示されるか見てみます。
CSS source
p {
border: 10px solid #0188ff;
}
太さ部分を「 1px 」に指定した、シンプルな使用例です。
太さ部分を「 5px 」に指定した、シンプルな使用例です。
太さ部分を「 10px 」に指定した、シンプルな使用例です。
太さ部分を「 20px 」に指定した、シンプルな使用例です。
太さ部分を「 0.5em 」に指定した、シンプルな使用例です。
太さ部分を「 1em 」に指定した、シンプルな使用例です。
太さ部分を「 1.5em 」に指定した、シンプルな使用例です。
太さ部分を「 2em 」に指定した、シンプルな使用例です。
太さ部分を「 0.5ex 」に指定した、シンプルな使用例です。
太さ部分を「 1ex 」に指定した、シンプルな使用例です。
太さ部分を「 1.5ex 」に指定した、シンプルな使用例です。
太さ部分を「 2ex 」に指定した、シンプルな使用例です。
太さ部分を「 thin 」に指定した、シンプルな使用例です。
太さ部分を「 medium 」に指定した、シンプルな使用例です。
太さ部分を「 thick 」に指定した、シンプルな使用例です。
「 border-color(ボーダーの色の一括指定) 」を設定する場合と同様の値が指定できます。
次は、「シンプルな使用例」の色の部分のみを書き替えてどのように表示されるか見てみます。
CSS source
p {
border: 10px solid #0000ff;
}
色の部分に「#ff0000」を指定した、シンプルな使用例です
色の部分に「#00ff00」を指定した、シンプルな使用例です
色の部分に「#0000ff」を指定した、シンプルな使用例です
色の部分に「red」を指定した、シンプルな使用例です
色の部分に「green」を指定した、シンプルな使用例です
色の部分に「blue」を指定した、シンプルな使用例です
ボーダーに関連するプロパティの値をまとめて指定した例です。
CSS source
p {
margin: 1.5em 3em;
padding: 0.3em;
text-align: center;
}
.c1 { border: 1px solid #999999 }
.c2 { border: 1px dashed #336699 }
.c3 { border: 3px double #ff3300 }
.c4 { border: 4px dotted #ff9900 }
.c5 {
border: 6px outset #cc9900;
color: #000000;
background: #ffcc00;
}
.c6 {
border: 6px inset #ffcc00;
color: #ffffff;
background: #cc9900;
}
.c7 {
border: 6px groove #009966;
color: #000000;
background: #ffff00;
}
.c8 {
border: 6px ridge #ffff00;
color: #ffffff;
background: #006600;
}
HTML source
<p class="c1">border: 1px solid #999999</p>
<p class="c2">border: 1px dashed #336699</p>
<p class="c3">border: 3px double #ff3300</p>
<p class="c4">border: 4px dotted #ff9900</p>
<p class="c5">border: 6px outset #cc9900</p>
<p class="c6">border: 6px inset #ffcc00</p>
<p class="c7">border: 6px groove #009966</p>
<p class="c8">border: 6px ridge #ffff00</p>
Sample
border: 1px solid #999999
border: 1px dashed #336699
border: 3px double #ff3300
border: 4px dotted #ff9900
border: 6px outset #cc9900
border: 6px inset #ffcc00
border: 6px groove #009966
border: 6px ridge #ffff00
ボーダーに関連する値を、メニュー、入力フィールド、ボタンに適用した例です。
CSS source
textarea { margin-top: 1em; }
input {
border: 4px outset #ff3300;
}
select, .field {
border: 4px groove #009900;
}
HTML source
<form>
<p>
<select>
<option>select 要素</option>
<option>選択肢2</option>
</select>
</p>
<p>
<input type="text" value="input 要素" class="field">
<br>
<textarea rows="3" cols="20" class="field">
textarea 要素
</textarea>
</p>
<p>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</p>
</form>
Sample