4辺の境界線(ボーダー)の太さを設定するショートハンド

CSS - border-width

概要

CSSプロパティ「border-width」は、境界線(ボーダー)の太さを4辺まとめて指定することができるショートハンドプロパティです。

※ただしこのプロパティのみ指定しても表示されません。これはボーダーのスタイルを指定するプロパティ、「 border-style 」の初期値が「none」になっているためです。そのため、スタイル(border-style)、色(border-color)を一緒に指定するか、それらをまとめて指定できるCSSプロパティ border を利用するとよいでしょう。

<div class="border">3つの値を指定したボーダー要素</div>
<div class="border border-width">border-widthプロパティでボーダーの太さを調整したボーダー要素</div>
<style>
  div {
  margin-bottom: 10px;
}
  .border {
    border: 1px solid #000;
  }
  .border-width {
 border-width: 5px;
 }
</style>

値の指定方法

値は1つから4つまでいれることができ、それぞれ「上下左右」の4辺に対応しています。

{ border-width: 値(1~4つ) }

4辺の値について

4辺というのは「上」、「下」、「左」、「右」を指し、まとめて記述することも、一つづつ指定することも可能です。値が1つの場合はその値が4辺全てに反映され、2つの値をいれると「上下」、「左右」に反映されます。更には、4つの値を入れた場合は「上」「右」「下」「左」と、時計回りの順序で指定が反映されます。

こちらは4つ値を入れた例です。

<div class="border">3つの値を指定したボーダー要素</div>
<div class="border border-width">border-widthプロパティでボーダーの太さを調整したボーダー要素</div>
<style>
  div {
  margin-bottom: 10px;
}
  .border {
    border: 1px solid #000;
  }
  .border-width {
 border-width: 5px 10px 20px 40px;
 }
</style>
説明
プロパティ名: 5px 「上下左右」に5pxの値を指定します。
プロパティ名: 5px 10px 「上下」に5px、
「左右」に10pxの値を指定します。
プロパティ名: 5px 10px 15px「上」に5px、
「左右」に10px、
「下」に15pxの値を指定します。
プロパティ名: 5px 10px 15px 20px 「上」に5px、
「右」に10px、
「下」に15px、
「左」に20pxの値を指定します。

値について

指定できる値の種類です。

説明
value単位はpx, emなどが可能です。マイナス値は入れられません
keywordthin, medium, thickが入ります

プロパティの種類について

「border」 プロパティは、4辺それぞれに異なった値をいれることができませんが、細分化したプロパティを使用することによって、値を変更することができます(指定可のみ)。それぞれのプロパティをまとめた一覧になりますので確認してみてください。

プロパティ名4辺一括で指定される内容細分化プロパティ名
borderボーダーの太さ、スタイル、色を指定できる4辺指定可。border-top、border-bottom、border-left、border-right
border-width太さを指定できる4辺指定可。border-top-width、border-bottom-width、border-left-width、border-right-width
border-styleスタイルを指定できる4辺指定可。border-top-style、border-bottom-style、border-left-style、border-right-style
border-color色を指定できる4辺指定可。border-top-color、border-bottom-color、border-left-color、border-right-color
border-image背景を指定できる4辺指定不可。border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat

使用例

要素によって、ボーダーの太さのみを変更したい場合などに使用するとよいでしょう。

<div class="border-style">本日の天気は晴れです。</div>
<div class="border-style border-width-1">本日の天気は晴れです。</div>
<div class="border-style border-width-2">本日の天気は曇りです。</div>
<div class="border-style border-width-3">本日の天気は雨です。</div>
<style>
div {
  margin-bottom: 10px;
}
.border-style {
  border-style: solid;
}
.border-width-1 {
  border-width: 10px;
}
.border-width-2 {
  border-width: 20px;
}
.border-width-3 {
  border-width: 30px;
 }
</style>

仕様書

関連CSSプロパティ