border-bottom-style
解説
下線のスタイルを指定する際に使用します。
詳細はborder-style解説も参照下さい。
プロパティ情報
値: | キーワード(none ,hidden ,solid ,double ,dashed ,dotted ,groove ,ridge ,inset ,outset )の中から必ず1つ。 |
---|---|
初期値: | none |
適用対象: | 全ての要素 |
継承: | しない |
パーセンテージ: | 不可 |
適用メディア: | 視覚 |
レベル: | 2 |
参照
border border-color border-style border-width border-top border-top-color border-top-style border-top-width border-bottom border-bottom-color border-bottom-style border-bottom-width border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width
使用例
ソース
CSSの記述方法はスタイルシートってなに?も参照下さい。 p.sample1 {border-bottom-style: none;} p.sample2 {border-bottom-style: hidden;} p.sample3 {border-bottom-style: solid;} p.sample4 {border-bottom-style: double;} p.sample5 {border-bottom-style: groove;} p.sample6 {border-bottom-style: ridge;} p.sample7 {border-bottom-style: inset;} p.sample8 {border-bottom-style: outset;} p.sample9 {border-bottom-style: dashed;} p.sample0 {border-bottom-style: dotted;}
HTMLの記述方法 <p class="sample1">例1</p> <p class="sample2">例2</p> <p class="sample3">例3</p> <p class="sample4">例4</p> <p class="sample5">例5</p> <p class="sample6">例6</p> <p class="sample7">例7</p> <p class="sample8">例8</p> <p class="sample9">例9</p> <p class="sample0">例10</p>
表示結果
例1
例2
例3
例4
例5
例6
例7
例8
例9
例10