このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
border-left-style
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
border-left-style はCSS のプロパティで、要素の左側の境界線 (border) のスタイルを設定します。
試してみましょう
border-left-style: none;border-left-style: dotted;border-left-style: dashed;border-left-style: solid;border-left-style: groove;border-left-style: inset;<section> <div> This is a box with a border around it. </div></section>#example-element { background-color: #eee; color: #000; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px;}body { background-color: #fff;}メモ:仕様書では、異なるスタイルの境界線を角でどの様に接続するかを定義していません。
構文
css
/* キーワード値 */border-left-style: none;border-left-style: hidden;border-left-style: dotted;border-left-style: dashed;border-left-style: solid;border-left-style: double;border-left-style: groove;border-left-style: ridge;border-left-style: inset;border-left-style: outset;/* グローバル値 */border-left-style: inherit;border-left-style: initial;border-left-style: revert;border-left-style: revert-layer;border-left-style: unset;border-left-style プロパティは、単一の<line-style> キーワード値で指定します。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | すべての要素。::first-letter にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
border-left-style =
<line-style>
<line-style> =
none|
hidden|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset
例
border-left-style の設定
HTML
html
<table> <tr> <td>none</td> <td>hidden</td> <td>dotted</td> <td>dashed</td> </tr> <tr> <td>solid</td> <td>double</td> <td>groove</td> <td>ridge</td> </tr> <tr> <td>inset</td> <td>outset</td> </tr></table>CSS
css
/* 表の外見を定義 */table { border-width: 2px; background-color: #52e385;}tr,td { padding: 3px;}/* border-left-style の例のクラス */.b1 { border-left-style: none;}.b2 { border-left-style: hidden;}.b3 { border-left-style: dotted;}.b4 { border-left-style: dashed;}.b5 { border-left-style: solid;}.b6 { border-left-style: double;}.b7 { border-left-style: groove;}.b8 { border-left-style: ridge;}.b9 { border-left-style: inset;}.b10 { border-left-style: outset;}結果
仕様書
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-style |
ブラウザーの互換性
関連情報
- その他のスタイルに関する境界のプロパティ:
border-bottom-style,border-right-style,border-top-style,border-style - その他の左側の境界に関するプロパティ:
border-left,border-left-color,border-left-width