--- title: border-left-width slug: Web/CSS/border-left-width tags: - CSS - CSS プロパティ - CSS 背景と境界 - Reference - border - border-left - border-width translation_of: Web/CSS/border-left-width ---
{{CSSRef}}

border-left-width は CSS のプロパティで、要素の左側の境界の幅を設定します。

{{EmbedInteractiveExample("pages/css/border-left-width.html")}}

構文

/* キーワード値 */
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;

/* <length> 値 */
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;

/* グローバル値 */
border-left-width: inherit;
border-left-width: initial;
border-left-width: unset;

値

<line-width>
明示的な負の値ではない {{cssxref("<length>")}} またはキーワードで、境界の幅を定義します。キーワードの場合、以下の値のうちの一つでなければなりません。
thin
細い境界線
medium
中くらいの境界線
thick
太い境界線

メモ: 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか一つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に thin ≤ medium ≤ thick というパターンに従い、値は同じ文書の中では一貫しています。

形式文法

{{csssyntax}}

例

HTML

<div>Element 1</div>
<div>Element 2</div>

CSS

div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-left-width: thick;
}
div:nth-child(2) {
  border-left-width: 2em;
}

結果

{{EmbedLiveSample('Example', '100%')}}

仕様書

仕様書 状態 備考
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-left-width')}} {{Spec2('CSS3 Backgrounds')}} 目立った変更はなし。
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}} {{Spec2('CSS2.1')}} 目立った変更はなし。
{{SpecName('CSS1', '#border-left-width', 'border-left-width')}} {{Spec2('CSS1')}} 初回定義

{{cssinfo}}

ブラウザーの互換性

{{Compat("css.properties.border-left-width")}}

関連情報