枠線のスタイルを個別指定 【border-bottom-style、border-bottom-style、border-left-style、border-right-style】
ブラウザで表示した時の見え方
Beautiful Rose
Beautiful Rose
Beautiful Rose
ソースサンプル
【CSS】
h2 {
border-color: #009933;
}
h2#sample1 {
border-bottom-style: dashed;
color: #009933
}
h2#sample2 {
border-bottom-style: double;
}
h2#sample3 {
border-top-style: dotted;
border-bottom-style: dotted;
}
【HTML】
<h2 id="sample1">Beautiful Rose</h2>
<h2 id="sample2">Beautiful Rose</h2>
<h2 id="sample3">Beautiful Rose</h2>
[
黒※説明中のタグ
紫※省略可能なタグ
赤※変更可能
緑※文章など
]
解説
- 文字色を設定している場合は、ボーダーの色もその色で表示されます。
| オプション |
| hidden | 表示しない | border-bottom-style: hidden |
| solid | 一本の線で表示する | border-bottom-style: solid |
| double | 二本の線で表示する | border-bottom-style: double |
| groove | へこんだ感じに表示する | border-bottom-style: groove |
| ridge | 飛び出して見えるように表示する | border-bottom-style: ridge |
| inset | 枠の内側がへこんだ風に表示する | border-bottom-style: inset |
| outset | 枠の内側が飛び出して見えるように表示する | border-bottom-style: outset |
| dashed | 破線で表示する | border-bottom-style: dashed |
| dotted | 点線で表示する | border-bottom-style: dotted |
| 値 | 機能 | 例 |
AICHAN WEB(Z)
>
HTML＆CSSサンプル集(S)
>
枠線のスタイルを個別指定