CSS border-bottom-style プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

下ボーダーのスタイルを設定します:

p {
    border-style: solid;
    border-bottom-style: dotted;
}
Try it Yourself ❯

定義と用法

border-bottom-style プロパティは、要素の下ボーダーのスタイルを設定します。

デフォルト値: なし
継承: 継承する
アニメーション可否: 不可。animatable を参照
バージョン: CSS1
JavaScript 構文: object.style.borderBottomStyle="dotted" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

プロパティ
border-bottom-style 1.0 5.5 1.0 1.0 9.2

注: IE7 以前は、値 "hidden" をサポートしていません。 IE8は、!DOCTYPE が必要です。IE9 以降は、"hidden" をサポートしています。


CSS 構文

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

プロパティの値

説明 Play it
なし ボーダーを指定しません。これがデフォルトです Play it ❯
hidden テーブル要素のボーダーが重なり合う場合の解決方法を除き "none" に同じです Play it ❯
dotted 点線のボーダーを指定します Play it ❯
dashed 破線のボーダーを指定します Play it ❯
solid 実線のボーダーを指定します Play it ❯
double 二重線のボーダーを指定します Play it ❯
groove 3D の窪んだように見える線のボーダーを指定します。効果は、border-color 値に依存します Play it ❯
ridge 3D の隆起したように見える線のボーダーを指定します。効果は、border-color 値に依存します Play it ❯
inset 領域全体が立体的に窪んだように見えるボーダーを指定します。効果は、border-color 値に依存します Play it ❯
outset 領域全体が立体的に隆起したように見えるボーダーを指定します。効果は、border-color 値に依存します Play it ❯
initial プロパティにデフォルト値を設定します。initial を参照 Play it ❯
inherit このプロパティは親要素を継承します。inherit を参照

関連ページ

CSS チュートリアル: CSS Border

CSSリファレンス:border-bottom プロパティ

HTML DOM リファレンス: borderBottomStyle プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯