1値4辺を同じ線種にする
キーワードを1つだけ書くと、上・右・下・左のすべてに適用されます。
border-style
要素の4辺にある境界線のかたちをまとめて指定するプロパティ。実線・破線・点線などを辺ごとに選び、値の数と適用先を比べます。
CSSのborder-styleとは？
境界線の上・右・下・左の線種をライブプレビューで変えながら、1〜4値の順番、10種類のキーワード、線が見える条件を初学者向けに解説します。
遊んでみよう
1〜4値を上から時計回りに配置
上右下左border-style
CSS
.element border-style: solid;
値のパターン
border-styleの構成要素
2〜3値対向の辺で線種を共有する
2値は上下／左右、3値は上／左右／下の順です。左右は同じ線種を使います。
4値上から時計回りに指定する
4つのキーワードは上・右・下・左の順で、上辺から時計回りに対応します。
早見表
まずsolid・dashed・dotted・doubleを比べます。立体的な線は色と太さによって見え方が変わります。
01
none | hidden境界線を表示しない非表示02
solid1本の実線を表示する基本03
dashed短い線が続く破線を表示する破線04
dotted丸い点が続く点線を表示する点線05
double2本の実線を表示する2本線06
groove | ridgeへこみ／出っ張りに見える線を表示する立体07
inset | outset箱全体が沈む／浮くように見せる立体よくある使い方
01
カードを実線で囲む
border-widthとborder-colorを用意したカードへsolidを指定し、輪郭をはっきり見せます。
.card { border-style: solid; }02
切り取り位置を破線で示す
上辺だけをdashedにし、ほかの辺をnoneにすると、切り取り位置を形で示せます。
.coupon { border-style: dashed none none; }03
下辺を2本線で強調する
下辺だけdoubleにすると、見出しと本文の区切りを太さだけでなく線の形でも強調できます。
.heading { border-style: none none double; }ポイント
初期値のnoneでは、幅や色を指定しても線は見えない。
border-styleの各辺の初期値はnoneです。noneとhiddenでは対応するborder-widthの使用値が0になり、線は表示されません。折りたたんだ表の境界線が競合するときはnoneの優先度が最も低く、hiddenはほかの線も隠します。すべての要素と::first-letterに適用できますが、子要素へは継承されません。dotted・dashedの線分や間隔はブラウザーによって見え方が異なり、doubleは太さが小さいと2本線の差が分かりにくくなります。groove・ridge・inset・outsetはborder-colorから立体的な色を作ります。値の切り替えは連続的に変化せず、離散的に変わります。
関連するCSSも見てみよう。
border-style と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。