CSSの境界線の幅

CSS境界線 CSSの枠線の色

CSS 境界線の幅

border-width 属性は、4 つの境界線の幅を指定します。

幅は、特定のサイズ（px、pt、cm、em 単位）、または 3 つの事前定義値（thin、medium、thick）のいずれかに設定できます。

例

さまざまな境界線の幅のデモ:

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
} 

p.four {
  border-style: dotted;
  border-width: thick;
}

結果：

5px border-width

medium border-width

2px border-width

thick border-width

自分で試してみてください

特定の辺の幅

border-width 属性は、1 ～ 4 つの値 (上、右、下、左の境界線) に設定できます。

例

p.one {
  border-style: solid;
  border-width: 5px 20px;/* 上下の境界線は 5px、他の辺は 20px */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 上下の境界線は 20px、他の辺は 5px */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上境界線 25px、右境界線 10px、下境界線 4px、左境界線 35px */
}

自分で試してみてください

CSS境界線 CSSの枠線の色