スポンサード リンク
border-bottomプロパティ
HTML要素の下の枠線のスタイル(枠線の種類)、枠線の太さ、枠線の色をまとめて指定できます使い方(書式)
セレクタ { border-bottom: 値; }
border-bottomプロパティ
対応ブラウザ | |
適用できる要素 | 全ての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;