border-left-styleプロパティ

TOPページに戻る > CSS

border-left-styleプロパティ

HTML要素の左の枠線のスタイル（枠線の種類）を指定できます
値は、solidなどキーワードでの指定です
閲覧するブラウザによって若干見た目が変わることがあります（四角い点線、丸い点線など)
border-top-styleプロパティの初期値はnoneです。初期値の場合、何も表示されません

使い方（書式）

セレクタ { border-top-style: 値; }                                    

border-left-styleプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	しない

プロパティの値	説明
solid	実線を表示。一番良く使います
dotted	点線を表示
dashed	破線を表示
double	二重線で表示
groove	立体的な線
ridge	立体的な線
inset	立体的な線
outset	立体的な線
none	枠線を表示しない。これが初期値
hidden	noneと同じく枠線を表示しない。古いバージョンのIEでは未対応

実際の指定方法

p.hoge {
border-left-style: solid;       /* 要素の左の枠線を実線で表示 */
 }

p.hoge2 {
 border-left-style: dotted;     /* 要素の左の枠線を点線で表示 */
 }

p.hoge3 {
 border-left-style: dashed;     /* 要素の左の枠線を破線で表示 */
 }

p.hoge4 {
 border-left-style: double;     /* 要素の左の枠線を二重線で表示 */
 }

p.hoge5 {
 border-left-style: groove;     /* 要素の左の枠線をgrooveで表示 */
 }

p.hoge6 {
 border-left-style: ridge;      /* 要素の左の枠線をridgeで表示 */
 }

p.hoge7 {
 border-left-style: inset;      /* 要素の左の枠線をinsetで表示 */
 }

p.hoge8 {
 border-left-style: outset;     /* 要素の左の枠線をoutsetで表示 */
 }

p.hoge9 {
 border-left-style: none;       /* 要素の左の枠線を表示しない */
 }

html部分

<p class="hoge">border-left-style: solid;</p>

<p class="hoge2">border-left-style: dotted;</p>

<p class="hoge3">border-left-style: dashed;</p>

<p class="hoge4">border-left-style: double;</p>

<p class="hoge5">border-left-style: groove;</p>

<p class="hoge6">border-left-style: ridge;</p>

<p class="hoge7">border-left-style: inset;</p>

<p class="hoge8">border-left-style: outset;</p>

<p class="hoge9">border-left-style: none;</p>

実際の表示

  border-left-style: solid;

  border-left-style: dotted;

  border-left-style: dashed;

  border-left-style: double;

  border-left-style: groove;

  border-left-style: ridge;

  border-left-style: inset;

  border-left-style: outset;

  border-left-style: none;