スポンサード リンク
border-left-styleプロパティ
HTML要素の左の枠線のスタイル(枠線の種類)を指定できます使い方(書式)
セレクタ { 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;