border
CSSの書き方
border:太さ 線種 色 ;
| CSSの詳細情報 | |||||
|---|---|---|---|---|---|
| プロパティ名 | border | 対応ブラウザ | Windows | MAC | |
| 読み方 | ボーダー | IE 5.0以上（※）/FF1.0/NS7.1/OP8.0 | SF/IE5.0 | ||
| 意味 | 外枠/境界線 | CSSレベル | CSSレベル1 | ||
| 設定値 | サイズ、線種、カラーコード | 対象 | すべての要素 | ||
| デフォルト | 各対象要素の標準値 | 継承 | しない | ||
※WindowsIE5.0に一部制限あり
解説
ボックスの外枠（境界線）を四方向一括で指定します。
「border:」に続く値には、ボーダーの太さ、線種、色をそれぞれ指定します。
各値の間には半角スペースを挿入します。
またこれら3つの値の順序については順不同です。
従って、「色/太さ/線種」の順番に書いても問題ありません。
線種で指定できる値は以下の表を参照してください。
| 線種 | スタイル |
|---|---|
| none | なし（透明） |
| solid | 実線 |
| dashed | 破線 |
| dotted | 点線 |
| double | 二重線 |
| groove | くぼみ |
| ridge | 浮きだし |
| inset | 立体くぼみ |
| outset | 立体浮きだし |
一部制限あり
Windows版のInternetExplorer5.0以前では「dashed（破線）」と「dotted（点線）には対応していません。
どちらで指定しても実線で表示されます。
二重線（double）についての注意
二重線は、3ピクセル以上で指定しないと二重線にはなりません。
2ピクセル以下では実線で表示されます。
CSS/HTMLサンプル
p.solid { border:5px solid #ffdff9; }
p.dashed { border:5px dashed #ffdff9; }
p.dotted { border:5px dotted #ffdff9; }
p.double { border:5px double #ffdff9; }
p.groove { border:5px groove #ffdff9; }
p.ridge { border:5px ridge #ffdff9; }
p.inset { border:5px inset #ffdff9; }
p.outset { border:5px outset #ffdff9; }
各段落にボーダーを指定 サンプル
