外枠(ボーダー)を四方向一括で指定する

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; }

各段落にボーダーを指定 サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!