CSS

This is a CSS property that specifies the thickness of the top border of an element.

border-top-width プロパティ

　border-top-widthプロパティは、要素の上側のボーダーの太さを指定するためのプロパティです。このプロパティは、要素の上側にあるボーダーの太さをピクセル（px）、ポイント（pt）、パーセント（%）、em、remなどの単位で指定することができます。上下左右の境界線の幅をまとめて指定する際には、border-width を使用してください。

　例えば、以下のような CSSコードがある場合、要素の上側に２ピクセルの太さのボーダーが表示されます。

border-top-width: 2px;

　border-top-widthプロパティは、border-styleプロパティを使用して指定されたボーダーのスタイルと組み合わせて使用することができます。例えば、以下のような CSSコードがある場合、要素の上側に２ピクセルの太さで実践のボーダーが表示されます。

border-top-style: solid;
border-top-width: 2px;

　border-top-widthプロパティは、要素の上側だけでなく、右側、下側、左側のボーダーの太さを指定する border-right-width、border-bottom-width、border-left-widthプロパティと組み合わせて使用することもできます。

　また、border-top-widthプロパティは、inherit値を使用して親要素からの値を継承することもできます。例えば、以下のような CSSコードがある場合、要素の上側のボーダーの太さは、親要素からの値を継承します。

border-top-width: inherit;

border-top-widthプロパティの概要

書式

border-top-width: 値;

適用対象

すべての要素

初期値

medium

値の継承

しない

指定できる値

実数 + 単位

実数に em、pt、px などの単位をつけて指定できます。マイナスの値と単位に % は指定できません。尚、pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。また、emとはフォントの高さを1とする単位で、exとは小文字の｢x｣の高さを1とする単位です。

thin, medium, thick

太さはキーワードで指定することもできます。thin は細いボーダー、medium は中位のボーダー、thick は太いボーダーに設定しますが、キーワードで指定する場合は、具体的な太さはブラウザによって異なります。

Sample

p {
	border-style: solid;
}
p.sample1 {
	border-top-width: 6px;
}
p.sample2 {
	border-top-width: 1em;
}
p.sample3 {
	border-top-width: thin;
}
p.sample4 {
	border-top-width: medium;
}
p.sample5 {
	border-top-width: thick;
}

<p class="sample1">上側のボーダーの太さに 6px を指定しています。</p>
<p class="sample2">上側のボーダーの太さに 1em を指定しています。</p>
<p class="sample3">上側のボーダーの太さに thin を指定しています。</p>
<p class="sample4">上側のボーダーの太さに medium を指定しています。【初期値】</p>
<p class="sample5">上側のボーダーの太さに thick を指定しています。</p>