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

border

{ border 【 ボーダー 】 : -width -style -color; }

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

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

値の指定方法

指定できる値は各プロパティと同様です。それぞれの値は半角スペースで区切って指定します。値は任意の順で指定でき、省略した場合には各プロパティの初期値が適用されます。

サンプルコード

以下の例では、四辺すべてに幅5px、緑色の実線のボーダーを適用したあとに、border-bottomプロパティを使用して下辺のみ、幅1px、黒色の破線を指定しています。

div{
  border :5px solid green;
  border-bottom: 1px dashed black;
}

関連記事