We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

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

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

構文

<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' に設定されているため境界線が表示されません。

仕様

ブラウザの互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,