border-bottomプロパティ

TOPページに戻る > CSS

スポンサード リンク

border-bottomプロパティ

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

使い方(書式)

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

border-bottomプロパティ

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

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

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

実際の指定方法

.hoge {
border-bottom: solid 1px #FC0;  /* 要素の下の枠線を実線、1px、色は#FC0で表示 */
 }
.hoge2 {
 border-bottom: solid 1px;      /* 要素の下の枠線を実線、1pxで表示、色は文字色*/
 }
.hoge3 {
 border-bottom: solid #FC0;     /* 要素の下の枠線を実線、色は#FC0で表示、太さは初期値 */
 }
.hoge4 {
 border-bottom: solid;          /* 要素の下の枠線を実線で表示、太さは初期値、色は文字色 */
 }

html部分

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

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

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

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

実際の表示

border-bottom: solid 1px #FC0;

border-bottom: solid 1px;

border-bottom: solid #FC0;

border-bottom: solid;





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