【border-top-width】上のボーダー(枠線)の太さを指定

border-top-widthプロパティでは、上のボーダーの幅(太さ)を個別に指定する事ができます。

指定方法は、数値に単位をつける方法、mediumなどのキーワードで指定する方法がありますが、ボーダーの太さに負の値を指定する事はできません。 またキーワードで指定する場合、実際に表示される太さはブラウザに依存します。

なおborder-top-widthを指定しただけでは、ボーダーは表示されません。 これはボーダーの種類(border-style)の初期値が「none」となっているためです。 ボーダーを表示し、幅の指定を有効にするには、border-top-widthと併せてボーダーの種類(border-style)を設定し「none」「hidden」以外の値を指定して下さい。

上下左右のボーダーの太さをまとめて指定したい場合は、border-widthを使用します。

書式

  • border-top-width : ……… 上のボーダー(枠線)の太さを個別指定

★:thin、medium、thick、実数値+単位、inherit

実数値+単位
数値にpxなどの単位をつけてボーダーの太さを指定します。負の値は指定できません。
thin
細い線で表示します。
medium
中くらいの線で表示します。
thick
太い線で表示します。

使用した時の例

p {border-style:solid;}

.sample1 {border-top-width:10px;}
.sample2 {border-top-width:thin;}
.sample3 {border-top-width:medium;}
.sample4 {border-top-width:thick;}
<p class="sample1">10px</p>
<p class="sample2">thin</p>
<p class="sample3">medium</p>
<p class="sample4">thick</p>

ブラウザ上の表示例

10px

thin

medium

thick

対応ブラウザなどのデータ

初期値 medium 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報