CSSプロパティ

CSS - border-top-width

概要

CSSプロパティ｢border-top-width｣は、上辺の境界線（ボーダー）の太さを指定することができます。また、4辺まとめて指定する場合は border-width プロパティを利用します。

<div class="border">本日の天気は晴れです。</div>
<div class="border border-top-width">本日の天気は晴れです。</div>
<style>
  div {
  margin-bottom: 10px;
}
  .border {
    border: 1px solid #000;
  }
  .border-top-width {
 border-top-width: 10px;
 }
</style>

値の指定方法

{ border-top-width: 値 }

前提として、ボーダースタイルの初期値が｢none｣なので、スタイルを指定していないとなにも表示がされませんので気をつけましょう。例の上段は｢border-top-width｣のみ指定しており、下段は border-style を指定しています。

<div class="border-top-width">本日の天気は晴れです。</div>
<div class="border-style border-top-width">本日の天気は晴れです。</div>
<style>
  div {
  margin-bottom: 10px;
}
  .border-style {
    border-style: solid;
  }
  .border-top-width {
 border-top-width: 10px;
 }
</style>

値について

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

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

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

｢border｣ プロパティは、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-top-width-1">本日の天気は晴れです。</div>
<div class="border-style border-top-width-2">本日の天気は曇りです。</div>
<div class="border-style border-top-width-3">本日の天気は雨です。</div>
<style>
div {
  margin-bottom: 10px;
}
.border-style {
  border-style: solid;
}
.border-top-width-1 {
  border-top-width: 10px;
}
.border-top-width-2 {
  border-top-width: 20px;
}
.border-top-width-3 {
  border-top-width: 30px;
 }
</style>

仕様書

 

関連CSSプロパティ