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