外枠(ボーダー)の線種を指定する

border-style

CSSの書き方

border-style:線種 線種 …;

CSSの詳細情報
プロパティ名 border-style 対応ブラウザ Windows MAC
読み方 ボーダースタイル IE 5.0以上(※)/FF1.0/NS7.1/OP8.0 SF/IE5.0
意味 外枠線種 CSSレベル CSSレベル1
設定値 線種 対象 すべての要素
デフォルト none 継承 しない

※WindowsIE5.0に一部制限あり

解説

ボックスの外枠(境界線)は、線種をまとめて指定することもできます。

ボーダースタイルプロパティに対する値はその数によって、指定できる上下左右の方向が以下の表のようになります。

記入する値の数 対象の方向
1つ 四方向(上/下/左/右)同じ
2つ 鉛直と水平方向(上下/左右の順)
3つ 上/左右/下の順
4つ 右回り方向(上/右/下/左の順)

線の種類

スタイルシートで指定できる線種は以下のようなスタイルがあります。

線種 スタイル
none なし(透明)
solid 実線
dashed 破線
dotted 点線
double 二重線
groove くぼみ
ridge 浮きだし
inset 立体くぼみ
outset 立体浮きだし

一部制限あり

Windows版のInternetExplorer5.0以前では「dashed(破線)」と「dotted(点線)には対応していません。

どちらで指定しても実線で表示されます。

CSS/HTMLサンプル

div { border:3px; border-style:solid dotted dashed; }

DIV要素の外枠の太さを3ピクセル、線種を4方向個別に指定 サンプル

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

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

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

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

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