Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

border-bottom-style

下部の境界線のスタイルに関する項目を指定できます。

サンプルコード
div.test { border-bottom-style: solid;}
div.test1 { border-bottom-style: dashed;}
div.test2 { border-bottom-style: dotted;}
指定可能な値一覧
概要
none境界線描画をしません。太さも0となります。これが初期値です。
solid1本の線で境界線が描画されます。
dashed隙間が大きめの破線で境界線が描画されます。
dotted隙間が小さめの破線で境界線が描画されます。
double2本の線で境界線が描画されます。
groove彫り込まれているような境界線で描画されます。『ridge』と逆の描画です。
ridge彫り上がっているような境界線で描画されます。『groove』と逆の描画です。
inset埋め込みされているような境界線で描画されます。『outset』と逆の描画です。
outset浮き上がっているような境界線で描画されます。『inset』と逆の描画です。
ブラウザでの表示結果
<div style="border-bottom-style: solid; height: 100px; padding: 10px; font-weight: bold;">高さ100px、パディング10pxのdiv要素です。</div>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

下部の境界線のスタイルに関する項目を指定できます。

『border-bottom-style』プロパティに何も指定していない場合は初期値の『none』となります。『none』だと太さが0となり境界線が描画されません。何かしらの境界線を描画したい場合は『border-bottom-style』プロパティの値を『none』以外の値にする必要があります。ご注意ください。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。