CSSのborderプロパティには何がある？style、color、widthなど

あらすじ

table要素や文字を囲う際にとっても便利なborder(ボーダー)プロパティ。
 
CSSの中でも使用頻度は高くフロントエンジニアには重宝されているプロパティの一つです。

今回はそんなborder(ボーダー)プロパティの記載方法や種類などをご紹介していきたいと思います。

具体的には

といった項目でご紹介していきます。

border(ボーダー)プロパティとは

border(ボーダー)とは日本語でいう線のことです。

borderプロパティとはHTMLに、線を記載する際に使用するCSSのプロパティのことです。

borderプロパティの記載には様々な方法があるのでそれぞれ細かく解説していきます。

セレクタにborder(ボーダー)を反映する方法

指定されたセレクタにボーダーを反映する際は

の3要素が使用できます。

それぞれについて詳しく説明していきます。

border-style

border-styleとはボーダーの種類を決める際に使用するプロパティです。

値には

といったものがあります。

下記が基本的な記載方法です。

セレクタ {
  border-style: solid;
}

上、下、右、左それぞれ違うスタイルにしたい場合は

セレクタ {
  border-color: 上 右 下 左;
}

といった順番でそれぞれに指定したい値を記載することで、スタイルを個別で指定することが可能になります。

例えば、

上のスタイルを通常の線、下のスタイルを点線、右のスタイルを二重線、左のスタイルをなしにしたい場合、

セレクタ {
  border-style: solid double dashed none;
}

と指定することになります。

border-color

border-colorはその名の通り、ボーダーの色を指定する際に使用するプロパティです。

下記が基本的な記載方法です。

h1 {
  border-color: blue;
}

上、下、右、左それぞれ違う色にしたい場合は

セレクタ {
  border-color: 上 右 下 左;
}

といった順番でそれぞれに指定したい値を記載することで、色を個別で指定することが可能になります。

例えば、

上の色を赤、下の色を青、右の色を緑、左の色をオレンジにしたい場合、

セレクタ {
  red green blue orange;
}

と指定することになります。

border-width

border-widthとはボーダーの幅を決めるプロパティのことで

といったサイズで指定する方法が一般的です。

下記が基本的な記載方法です。

セレクタ {
  border-width: thin
}

上、下、右、左それぞれ違う幅にしたい場合は

セレクタ {
  border-width: 上 右 下 左;
}

といった順番でそれぞれに指定したい値を記載することで、幅を個別で指定することが可能になります。

例えば、

上の幅を3px、下の幅を5px、右の幅を1px、左の幅を7pxにしたい場合、

セレクタ {
  3px 1px 5px 7px;
}

と指定することになります。

border(ボーダー)を個別に指定する方法

スタイルや色、幅をボーダーに反映する際に、個別にボーダーを指定することができます。

どういうことかというと、

といった具合に上のボーダー、下のボーダー、右のボーダー、左のボーダーとそれぞれ個別で指定することができます。

そして、

上のボーダーのスタイルを変更したい場合は

border-top-style: solid;

右のボーダーの色を変更したい場合は

border-right-color: red;

下のボーダーの幅を変更したい場合は

border-bottom-width: 5px;

と指定することでセレクタに個別のボーダースタイルを反映することができます。

border(ボーダー)プロパティの値を短縮

ボーダープロパティの値は短縮して記載することができます。

例えば、上記で紹介したborder-colorやborder-top-style、border-right-colorなど、それぞれをいちいち書いていたら時間がかかってしまいます。

そこで、ボーダープロパティを記載する際には

セレクタ {
  border: スタイル　色　幅;
}

と記載するだけでスタイル、色、幅を一回で指定することができます。

例えば、

セレクタ {
  border: solid red 1px;
}

と記載すると、「赤い1pxの通常線」を表現することができます。

border-top、border-bottom、border-right、border-leftも同じく短縮することができます。

まとめ

いかがだったでしょうか。

tableや文字を囲ったりする際には非常に便利なプロパティです。

応用して使えるようになれば様々なことができるようになります。

ぜひ覚えておきましょう。