[CSS] border系統のプロパティでボーダーの各辺をまとめて指定しよう!

1.border系統とは?

border系統のプロパティはボーダーの各辺の幅、スタイル、色をまとめて指定します。

値は任意の順序で指定できます。

値の指定方法は以下の通りです。

{ border-top: -style -width -color; }

{ border-right: -style -width -color; }

{ border-bottom: -style -width -color; }

{ border-left: -style -width -color; }

値の指定方法

値は半角スペースで区切って指定します。

値は任意の順序で指定できます。

2.border系統の使い方

それではborder系統の使い方をみていきましょう。

div {
 border-bottom: 2px dotted;
}

上記のようにすることで2pxの2本下線が表示されます。

他にも値を設定できるのでいろいろと試してみることをお勧めします!