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; }
各段落にボーダーを指定 サンプル