このborder属性はボックスの枠線のスタイル、枠線の色、枠線の太さを一括で指定できる属性です、色や太さは宣言しなくてもいいのですが、スタイルの初期値が表示しないになっているため、スタイルの宣言は絶対にしましょう。
値に宣言する順番は特にありません。
使い方は
などの使い分けができます。
セレクタ{
border:solid #ff0000 5px;
}
1本の線、赤、5pxの太さです。
値 | 概要 |
---|---|
#RGB | #000000等の16進数で2桁ずつ宣言し、細かく設定できる |
#RRGGBB | #000000等の16進数で1桁ずつ宣言し、設定できる |
rgb(R,G,B) | 色を10進数で指定する |
rgb(R%,G%,B%) | 色を%で指定する |
red | 色名で指定する、この場合は枠線を赤色にする | transparent※1 | 枠線の透明にする |
値 | 概要 |
---|---|
none | 表示しない(初期値) |
solid | 1本の線で表示 |
double | 2本の線で表示 |
groove | 枠がへこんでるように表示 |
ridge | 枠が飛び出しているように表示 |
inset | へこんでいるように表示 |
outset | 飛び出しているように表示 |
dashed※2 | 破線で表示 |
dotted※2 | 点線で表示 |
値 | 概要 |
---|---|
px | ピクセルで太さを設定する |
thin | 細い線を指定する |
medium | 中ぐらいの線を指定する |
thick | 太い線を指定する |
※1:IEで対応していない場合があります。
※2:IEに対応していないバージョンがあり、NNは対応していません。
他のborder-color属性などよりも使用頻度が高く設定しやすいため枠線の設定をしたいときの基本はこのborder属性となるでしょう。