最終更新日

border-styleプロパティ

border-styleは、上下左右の罫線の種類をまとめて設定するプロパティです。値を4個指定した場合、4つの値は、上、右、下、左の罫線の種類をそれぞれ順に表します。

・値が3個の場合は、左右の罫線が同じ値を示す
・値が2個の場合は、上下、左右の罫線がそれぞれ同じ値を示す
・値が1個の場合は、上下左右の罫線がすべて同じ値を示す

CSS3での変更点
特にありません
初期値 適用先 継承
各プロパティの初期値 すべての要素 なし
説明 表示例
none 罫線を引かない。border-colorやborder-widthの値は無視されます。(初期値
none
hidden 罫線を表示しません。noneとほぼ同等です。
hidden
dotted 点線
dotted
dashed 破線
dashed
solid 実線
solid
double 二重線
double
groove 立体的に窪んだ線
groove
ridge 立体的に隆起した線
ridge
inset ボックス全体が窪んだようにみえる囲み線
inset
outset ボックス全体が隆起したようにみえる囲み線
outset
サンプルコード
border-style: solid;
border-style: solid solid;
border-style: solid solid solid;
border-style: solid solid solid solid;
参考文献:CSS Backgrounds and Borders Module Level 3外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。