border-bottom-style

概要

border-bottom-style はボックス境界の下の線の形状を設定します。

初期値none
適用対象全要素. It also applies to ::first-letter.
継承不可
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

<br-style>

where
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

<border-style> 値

none
境界線無し。
hidden
'none'と同じですが、テーブル要素において境界衝突の解決の方法が異なります。
dotted
破線の一つ。
dashed
短いダッシュや線分の一つ。
solid
1本の直線、実線。
double
border-widthが同じピクセルでもう1つ追加されたような、2本の直線。
groove
彫り込んだ効果。
ridge
'groove' の逆。境界線が3D(浮き出る)表示になります。
inset
ボックスが埋め込まれて見える作り。
outset
'inset' の逆。ボックスが3D(エンボス)に見える作り。

サンプル

実際の表示を確認

element {
        border-bottom-size: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #000;
}

注釈

border-styleの値が設定されていない場合、デフォルト値が 'none' に設定されているため境界線が表示されません。

仕様

ブラウザの互換性

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本機能 1.0 1.0 5.5 9.2 1.0
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本機能 ? ? ? ? ?

参考

ドキュメントのタグと貢献者

 このページの貢献者: Sebastianz, ethertank, Yuichiro
 最終更新者: Sebastianz,