CSS3: border-top-width プロパティ - 境界ボックス上部の線の太さ

■ 概要

項  目説  明
記述形式 セレクタ {border-top-width: }
値 の形式 長さ | thin | medium | thick
初 期 値 medium
対応ブラウザー C1+ / e4+ / N6+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継  承 しない

■ 解説

border-top-widthプロパティ は,要素の 境界ボックスの上部の線の太さ を指定します。

なお,border-topプロパティによって, border-top-styleborder-top-colorborder-top-width の3つのプロパティを 一括指定できます。

数値による指定は,次のような単位を付けて可能です。

単位説  明
px
px とは画面の1画素(ピクセル) のサイズを1とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。
em
em とは現在使用中の標準フォントの高さを1とする単位です。 
ex
ex とは現在使用中の標準フォントの小文字の「x」の高さを1とする単位です。
親要素の widthプロパティ の値を基準にして割合を%値で指定します。

ただし,実際には,境界の太さにそれほど大きな値を指定することは少ないので,"px" を使う場合がほとんどです。

また,"thin""medium""thick" のキーワードによる指定内容は,次の通りです。

説  明
thin 細い境界線にします。
medium 中くらいの標準的な太さの境界線にします。 (初期値)
thick 太い境界線にします。

■ 使用例1 ( border-top-width プロパティの利用1)

HTMLソース
CSS
<head> ~ </head>
<style type="text/css" media="screen, handheld, print, tv" >
<!--
  div.sample {width: 50%; }
  p.width1 {border-top: solid red;border-top-width: thin; }
  p.width2 {border-top: solid red;border-top-width: medium; }
  p.width3 {border-top: solid red;border-top-width: thick;}
  p.width4 {border-top: solid red;border-top-width: 3px;}
  p.width5 {border-top: solid red;border-top-width: 6px;}
-->
</style>
HTML
<body> ~ </body>
<div class="sample">
   <p class="width1">
      {border-top-width: <em>thin</em>} の境界表示</p>
   <p class="width2">
      {border-top-width: <em>medium</em>} の境界表示</p>
   <p class="width3">
      {border-top-width: <em>thick</em>} の境界表示</p>
   <p class="width4">
      {border-top-width: <em>3px</em>} の境界表示</p>
   <p class="width5">
      {border-top-width: <em>6px</em>} の境界表示</p>
</div>

ブラウザー 表示例

{border-top-width: thin} の境界表示

{border-top-width: medium} の境界表示

{border-top-width: thick} の境界表示

{border-top-width: 3px} の境界表示

{border-top-width: 6px} の境界表示

■ 使用例2 ( border-top-width プロパティの利用2)

次の例では,クラス sample2sample3 では,border-top-width の値を持たない border-topborder-top-width の 2つプロパティの指定の順序が違います。 このうち,sample3 では,上部境界線の太さは, border-top-width の指定の 8px にはなりません。  それは,sample3 クラス では,後の border-top の値には, border-top-width が指定されていないため,初期値の medium に リセットされてしまうからです。

一方,クラス sample4 のようなスタイル,色,幅の個別の指定の場合では,指定内容の範囲 が独立していますので,指定の順番を変更しても結果は変わりません。

HTMLソース
CSS
<head> ~ </head>
<style type="text/css" media="screen, handheld, print, tv" >
<!--
   div.sample1 { background-color: #CCCCCC;
      border: solid red 6px;
      border-top-color: green;
      border-top-width: 8px;
   }
   div.sample2 { background-color: #CCCCCC;
      border-top: green solid;
      border-top-width: 8px;
   }
   div.sample3 { background-color: #CCCCCC;
      border-top-width: 8px;
      border-top: green solid;
   }
   div.sample4 { background-color: #CCCCCC;
      border-top-width: 8px;
      border-top-color: green;
      border-top-style: solid;
   }
-->
</style>
HTML
<body> ~ </body>
<div style="width:50%;">
   <br>
   <div class="sample1">
      これが class=&quot;sample1&quot; の部分です。</div>
   <br>
   <div class="sample2">
      これが class=&quot;sample2&quot; の部分です。</div>
   <br>
   <div class="sample3">
      これが class=&quot;sample3&quot; の部分です。</div>
   <br>
   <div class="sample4">
      これが class=&quot;sample4&quot; の部分です。</div>
   <br>
</div>

ブラウザー 表示例

これが class="sample1" の部分です。

これが class="sample2" の部分です。

これが class="sample3" の部分です。

これが class="sample4" の部分です。

■ 備考

【参考ページ】