ボーダーの各辺をまとめて指定する

border-top
border-right
border-bottom
border-left

{ border-top 【 ボーダー・トップ 】 : -width -width -color; }

{ border-right 【 ボーダー・ライト 】 : -width -width -color; }

{ border-bottom 【 ボーダー・ボトム 】 : -width -width -color; }

{ border-left 【 ボーダー・レフト 】 : -width -width -color; }

borderプロパティは、ボーダーの各辺のプロパティをまとめて指定するショートハンドです。

初期値 各プロパティに準じる
継承 なし
適用される要素 すべての要素
モジュール Backgrounds and Borders Module Level 3

値の指定方法

指定できる値は各プロパティと同様です。それぞれの値は半角スペースで区切って指定します。値は任意の順序で指定できます。

サンプルコード

以下の例では、まずborder-bottom-styleプロパティで実線のボーダーを指定していますが、border-bottomプロパティでは、スタイルの指定を省略しています。従って、border-bottomstyleプロパティの値は初期値であるnoneで上書きされ、ボーダーは表示されません。

div{
  border-bottom-style: solid;
  border-bottom :10px green;
}
/*以下のように指定したことになる*/
div{
  border-bottom-style: solid;
  border-bottom: 10px none green;
}

関連記事