CSS ボーダーボトム属性

定義と使用法

border-bottomの短縮属性は、下ボーダーのすべての属性を一つの宣言にまとめて設定します。

以下の属性を順番に設定できます：

その値のいずれかを設定しなくても問題はありません。例えば、border-bottom:solid #ff0000;も許可されています。

参照もしてください：

CSSチュートリアル：CSS 边框

HTML DOMリファレンスマニュアル：borderBottom属性

例

下ボーダースタイルを設定：

p
  {
  border-style:solid;
  border-bottom:thick dotted #ff0000;
  }

実際に試してみてください

CSS構文

border-bottom: border-width border-style border-color|initial|inherit;

属性値

値 説明
border-bottom-width 下ボーダーの幅を規定します。参照：border-bottom-width 中の可能な値。
border-bottom-style 下ボーダーのスタイルを規定します。参照：border-bottom-style 中の可能な値。
border-bottom-color 下ボーダーの色を規定します。参照：border-bottom-color 中の可能な値。
inherit 親要素からborder-bottom属性の設定を継承するべきであることを規定しています。

技術的な詳細

デフォルト値： not specified
継承性： no
バージョン： CSS1
JavaScript構文： object.style.borderBottom="3px solid blue"

他の例もご覧ください

すべての下ボーダーアクセサーを同一の宣言で設定
この例では、短縮属性を使用してすべての下ボーダーアクセサーを同一の宣言で設定しています。

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

注釈：IE7およびそれ以前のブラウザでは値"inherit"をサポートしていません。IE8では!DOCTYPEが必要です。IE9では"inherit"をサポートしています。