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

border-left-styleプロパティでは、左のボーダーのスタイル(種類)を個別に指定することができます。 個別指定ではなくボーダーを上下左右まとめて設定したい場合は、border-styleを使用します。

なおボーダーのスタイル(種類)の初期値は「none」となっています。このため初期の状態ではボーダーは表示されません。 ボーダー(枠線)を表示するには、「none」「hidden」以外の値を指定して下さい。

指定する値によってはボーダーを立体的な線にすることができますが、border-left-styleで左のボーダーのみをそれに指定しても立体的な感じには見えません。

書式

  • border-left-style : ……… 左のボーダーのスタイル(種類)を個別指定

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

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

使用した時の例

.sample1 {border-left-style: none;}
.sample2 {border-left-style: hidden;}
.sample3 {border-left-style: dotted;}
.sample4 {border-left-style: dashed;}
.sample5 {border-left-style: solid;}
.sample6 {border-left-style: double;}
.sample7 {border-left-style: groove;}
.sample8 {border-left-style: ridge;}
.sample9 {border-left-style: inset;}
.sample10 {border-left-style: outset;}
   
p {border-color:#FF0000; padding-left:10px;}
<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>

ブラウザ上の表示例

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

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

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

関連情報