【border-style】ボーダー(枠線)のスタイルを一括指定

border-styleプロパティでは、上下左右の各ボーダー(枠線)のスタイル(種類)を一括で(まとめて)指定することができます。 指定する値が1つの時は上下左右のボーダーの種類が同じになりますが、複数の値を半角スペースで区切って設定すると、値の数によって次のように適用されます。

  • 値が1つの場合……「上下左右」
  • 値が2つの場合……「上下」「左右」
  • 値が3つの場合……「上」「左右」「下」
  • 値が4つの場合……「上」「右」「下」「左」

なおボーダーのスタイルの初期値は「none」と設定されているため、値に「none」「hidden」以外を指定しなければ、ボーダーは表示されません。

書式

  • border-style : ……… ボーダーのスタイル(種類)を一括指定

★:none、hidden、solid、double、他下記値参照

none
ボーダーを表示しません。太さも「0」となります。テーブルのセルなどのボーダー(枠線)が重なり合う場合には、他の値が優先されます。(初期値)
hidden
ボーダーを表示しません。太さも「0」となります。テーブルのセルなどのボーダー(枠線)が重なり合う場合には、この値(hidden)が優先されます。
dotted
点線で表示します
dashed
破線で表示します
solid
一本線で表示します
double
二重線で表示します
groove
へこんで見えるように見える立体的な線で表示します
ridge
浮き上がったように見える立体的な線で表示します
inset
ボーダーの内側がへこんだように見える立体的な線で表示します(ボーダーの上と左が暗色、下と右が明色となります。)
outset
ボーダーの内側が浮き上がったように見える立体的な線で表示します(ボーダーの上と左が明色、下と右が暗色となります。)

使用した時の例

.sample1 {border-style: none;}
.sample2 {border-style: hidden;}
.sample3 {border-style: dotted;}
.sample4 {border-style: dashed;}
.sample5 {border-style: solid;}
.sample6 {border-style: double;}
.sample7 {border-style: groove;}
.sample8 {border-style: ridge;}
.sample9 {border-style: inset;}
.sample10 {border-style: outset;}
.sample11 {border-style: solid dotted;}
.sample12 {border-style: solid dotted double;}
.sample13 {border-style: solid dotted double none;}
    
p {border-color:#FF0000;}
.sample7,.sample8,.sample9,.sample10{border-width:8px};
<p class="sample1">none</p>
<p class="sample2">hidden</p>
<p class="sample3">dotted</p>
<p class="sample4">dashed</p>
<p class="sample5">solid</p>
<p class="sample6">double</p>
<p class="sample7">groove</p>
<p class="sample8">ridge</p>
<p class="sample9">inset</p>
<p class="sample10">outset</p>
<p class="sample11">[上下]solid [左右]dotted</p>
<p class="sample12">[上]solid [左右]dotted [下]double</p>
<p class="sample13">[上]solid [右]dotted [下]double [左]none</p>

ブラウザ上の表示例

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

[上下]solid [左右]dotted

[上]solid [左右]dotted [下]double

[上]solid [右]dotted [下]double [左]none

対応ブラウザなどのデータ

初期値 個別のプロパティを参照 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer5.5~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報