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

関連する属性

アクセスランキング