|
カスタム検索
|
|
|
|
|
border-xxx
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;
}
border
ページの先頭
2026 Webデザインレッスン