border-top、border-right、border-bottom、border-leftプロパティ
border-top、border-right、border-bottom、border-leftプロパティの概要
機能 |
ボーダー(枠線)の上下左右を個別に定義 |
指定可能な値 |
色、border-style, border-widthの値 |
初期値 |
色はcolorプロパティによる、スタイルは「none」、太さは、「medium」 |
継承 |
しない |
適用可能なボックス |
全て |
border-top、border-right、border-bottom、border-leftプロパティは、要素のボーダー(枠線)のスタイルを上下左右で個別に定義します。枠線のスタイルについては、border-styleを参照してください。また、要素にcolorプロパティが定義されていると、枠線にその色が使用されます。
example.css
h2 {
border-top: solid;
border-bottom: solid;
}
div {
color: #090;
border-right: double;
border-left: double;
}
枠線の一括指定
border-xxxの値をスペースで区切って、複数指定すると、枠線の太さ、スタイル、色を一括して設定することができます。値を記述する順番は、どのような順番でも構いません。
border-xxxプロパティの使用には、この方法が最もよく使用される方法だと思います。
example2.css
h2 {
border-top: 1px solid #900;
border-bottom: 1px solid #900;
}
div {
border-left: dotted thick #900;
}
h3 {
border-bottom: pink double 8px;
}