border-bottom-style : 下側の境界線のスタイルを設定する

border-bottom-style

要素の下側に表示される境界線のスタイルを指定した値に設定します。

border-bottom-style: dotted;

これは下側に表示される境界線のスタイルを点線に設定する記述です。

パラメータの設定

境界線のスタイル

あらかじめ定義されたスタイルを選択します。
利用できるスタイルは下記の通りです。

border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;

none	境界線を表示しません。境界線の幅も0になります。
hidden	noneと同じく境界線を表示しません。ただしnoneと違ってtableタグで他の境界線と重なった場合でも非表示となります。
dotted	境界線を点線で描写します。
dashed	境界線を破線で描写します。
solid	境界線を実線で描写します。
double	境界線を二重線で描写します。
groove	境界線をへこんだ立体線で描写します。
ridge	境界線を出っ張った立体線で描写します。
inset	要素全体がへこんだようなデザインになる境界線を描写します。
outset	要素全体が出っ張ったようなデザインになる境界線を描写します。

利用例

境界線のスタイルを設定

border-bottom-style: dotted;
border-bottom-color: red;
border-bottom-width: 6px;

■ 表示される内容

none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

設定したスタイルで境界線がどう表示されるかの一覧です。
各要素に記載された値を設定しています。

border-bottom-style

パラメータの設定

利用例

関連する属性