border-topプロパティ

TOPページに戻る > CSS

border-topプロパティ

HTML要素の上の枠線のスタイル（枠線の種類）、枠線の太さ、枠線の色をまとめて指定できます
値は、border-top-style、border-top-width、border-top-colorの3つの値を使います
値を書く順序は、自由です
2つまで値は省略できます
値を省略した場合、それぞれの値は初期値になります

使い方（書式）

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

border-topプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	しない

プロパティの値	説明
border-top-styleの値	枠線の種類を指定
border-top-widthの値	枠線の太さを指定
border-top-colorの値	枠線の色を指定

プロパティ	値を省略した場合の初期値
border-top-style	none
border-top-width	medium
border-top-color	文字色に指定されている色

実際の指定方法

.hoge {
border-top: solid 1px #FC0;  /* 要素の上の枠線を実線、1px、色は#FC0で表示 */
 }

.hoge2 {
 border-top: solid 1px;      /* 要素の上の枠線を実線、1pxで表示、色は文字色*/
 }

.hoge3 {
 border-top: solid #FC0;     /* 要素の上の枠線を実線、色は#FC0で表示、太さは初期値 */
 }

.hoge4 {
 border-top: solid;          /* 要素の上の枠線を実線で表示、太さは初期値、色は文字色 */
 }

html部分

<p class="hoge">border-top: solid 1px #FC0;</p>

<p class="hoge2">border-top: solid 1px;</p>

<p class="hoge3">border-top: solid #FC0;</p>

<p class="hoge4">border-top: solid;</p>

実際の表示

border-top: solid 1px #FC0;

border-top: solid 1px;

border-top: solid #FC0;

border-top: solid;