このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

border-bottom-style:下辺の境界線の見た目

記事Oct. 25th,2020
下辺の境界線の見た目を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 なし
適用対象 すべての要素
継承 しない
パーセント値 パーセント値は指定できません

border-bottom-style”プロパティは要素の下辺の境界線の見た目を指定するプロパティです。

サンプルコード

div { border-bottom-style: dotted;}

説明
none 境界線を表示せず、境界線の太さや色の指定は無視されます (border-collapse: collapse;の場合に重なる境界線があればその境界線が表示されます。)
hidden 境界線を表示せず、境界線の太さや色の指定は無視されます (border-collapse: collapse;の場合に重なる境界線も表示されません。)
dotted 点線
dashed 破線
solid 実線
double 二重線
groove 溝のように見える線
ridge 出っ張りのように見える線
inset 境界線の中身が沈み込んでいるように見える線 (border-collapse: collapse;の場合は“ridge”とみなされます。)
outset 境界線の中身が出っ張っているように見える線 (border-collapse: collapse;の場合は“groove”とみなされます。)

仕様書

Level 1 Level 2 Level 3
勧告(REC) 勧告(REC)
border-bottom-style
定義なし

定義あり

定義あり
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC)
none
定義なし

定義あり

定義あり
hidden
定義なし

定義あり

定義あり
dotted
定義なし

定義あり

定義あり
dashed
定義なし

定義あり

定義あり
solid
定義なし

定義あり

定義あり
double
定義なし

定義あり

定義あり
groove
定義なし

定義あり

定義あり
ridge
定義なし

定義あり

定義あり
inset
定義なし

定義あり

定義あり
outset
定義なし

定義あり

定義あり

使用例

下辺の境界線の見た目を指定する

div { border-bottom-style: none;}
border-bottom-style: none;
div { border-bottom-style: hidden;}
border-bottom-style: hidden;
div {
border-width: 5px;
border-bottom-style: dotted;
}
border-bottom-style: dotted;
div {
border-width: 5px;
border-bottom-style: dashed;
}
border-bottom-style: dashed;
div {
border-width: 5px;
border-bottom-style: solid;
}
border-bottom-style: solid;
div {
border-width: 5px;
border-bottom-style: double;
}
border-bottom-style: double;
div {
border-width: 5px;
border-bottom-style: groove;
}
border-bottom-style: groove;
div {
border-width: 5px;
border-bottom-style: ridge;
}
border-bottom-style: ridge;
div {
border-width: 5px;
border-bottom-style: inset;
}
border-bottom-style: inset;
div {
border-width: 5px;
border-bottom-style: outset;
}
border-bottom-style: outset;
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク