border-left-style CSS プロパティは、要素の左側の 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 プロパティで利用できるキーワードのうちの一つで指定します。

形式文法

<br-style>

where
<br-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 にも適用されます。
継承なし
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応112115.59.21
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応2.3 あり あり141 あり あり あり

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.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank, Yuichiro
最終更新者: mfuji09,