枠線の色を個別指定 【border-top-color、border-bottom-color、border-left-color、border-right-color】
ブラウザで表示した時の見え方
Beautiful Rose
ソースサンプル
【CSS】
h2 {
border-bottom-color: #cc0000;
border-bottom-width: 2px;
border-bottom-style: solid;
font-family: Courier
}
【HTML】
<h2>Beautiful Rose</h2>
[
黒※説明中のタグ
紫※省略可能なタグ
赤※変更可能
緑※文章など
]
解説
- ボーダーは、色と太さとスタイルを同時に設定する必要があります。
- border-top-color（上の色）、border-right-color（右の色）、border-bottom-color（下の色）、border-left-color（左の色）の四辺を個別に設定することが出来ます。
| オプション |
| #RRGGBB | 色を16進数で2桁ずつ指定する | border-top-color: #993300 |
| #RGB | 色を16進数で1桁ずつ指定する | border-top-color: #f00 |
| rgb(R,G,B) | 各色を10進数で指定する | border-top-color: #rgb(0,0,255) |
| rgb(R%,G%,B%) | 各色を%で指定する | border-top-color: #rgb(0%,50%,100%) |
| カラーネーム | 定義されている色名で指定する | border-top-color: black |
| transparent | 色を透明にする | border-top-color: transparent |
| 値 | 機能 | 例 |
AICHAN WEB(Z)
>
HTML＆CSSサンプル集(S)
>
CSS
-
枠線の色を個別指定