border-top-widthプロパティ

TOPページに戻る > CSS

スポンサード リンク

border-top-widthプロパティ

HTML要素の上の枠線の太さを指定できます
値は、px、emなどの単位を使って指定。または、キーワードを使って指定します
キーワードの値は、thin(細い)、medium(標準)、thick(太い)の3つです。キーワードで指定した場合、閲覧するブラウザによって太さが変わります
枠線を表示するにはborder-styleプロパティで枠線の種類を指定してください。 border-styleの値が指定されていないと枠線は表示されません。border-styleの初期値がnone(枠線なし)になっているためです

使い方(書式)

セレクタ { border-top-width: 値; }                                    

border-top-widthプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 しない

プロパティの値 説明
単位 px、emなどの単位
thin 細い枠線
medium 標準の太さの枠線。これが初期値、標準にしては太い
thick 太い枠線

実際の指定方法

p.hoge {
 border-top-width: 1px;    /* 要素の上の枠線を1pxに指定 */
 border-style: solid;      /* 要素の枠線を実線で表示 */
 }
p.hoge2 {
 border-top-width: 2px;    /* 要素の上の枠線を2pxに指定 */
 border-style: solid;      /* 要素の枠線を実線で表示 */
 }
p.hoge3 {
 border-top-width: 3px;    /* 要素の上の枠線を3pxに指定 */
 border-style: solid;      /* 要素の枠線を実線で表示 */
 }
p.hoge4 {
 border-top-width: 4px;    /* 要素の上の枠線を4pxに指定 */
 border-style: solid;      /* 要素の枠線を実線で表示 */
 }
p.hoge5 {
 border-top-width: 5px;    /* 要素の上の枠線を5pxに指定 */
 border-style: solid;      /* 要素の枠線を実線で表示 */
 }

html部分

<p class="hoge">border-top-width: 1px;</p>
<br>
<p class="hoge2">border-top-width: 2px;</p>
<br>
<p class="hoge3">border-top-width: 3px;</p>
<br>
<p class="hoge4">border-top-width: 4px;</p>
<br>
<p class="hoge5">border-top-width: 5px;</p>

実際の表示

border-top-width: 1px;


border-top-width: 2px;


border-top-width: 3px;


border-top-width: 4px;


border-top-width: 5px;





(C)2012 ホームページ作成無料