border-left-style

CSSborder-left-style プロパティは、要素の左側の border における線の形状を設定します。

メモ: 仕様書では、異なる形状の境界線を角でどの様に接続するかを定義していません。

構文

/* キーワード値 */
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: unset;

border-left-style プロパティは、 border-style プロパティで利用できるキーワードのうちの一つで指定します。

形式文法

<line-style>

where
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

HTML

<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

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;}

結果

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
border-left-style の定義
勧告候補 明確な変更はなし。
CSS Level 2 (Revision 1)
border-left-style の定義
勧告 初回定義。
初期値none
適用対象すべての要素。 ::first-letter にも適用されます。
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
border-left-styleChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1
補足
完全対応 1
補足
補足 Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid. This has been fixed in Firefox 50.
IE 完全対応 5.5Opera 完全対応 9.2Safari 完全対応 1WebView Android 完全対応 2.3Chrome Android 完全対応 18Firefox Android 完全対応 14
補足
完全対応 14
補足
補足 Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid. This has been fixed in Firefox 50.
Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報