[CSS] border(ボーダー)プロパティの使い方・種類をWebデザイナーが解説

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や文字を囲ったりする際には非常に便利なプロパティです。

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

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

合わせて読みたい

CSSの色を指定する方法には何がある？HEX値、RGBA値、HSLA値について

2019.9.9

みなさんはCSSで色の値を指定する際はどのように指定していますか？ 色の名前で指定する人もいれば、HEX値で指定する人もいると思います。 実はそれ以外にも指定方法はいくつかあリます。 今回はそんな色の指定方法について詳しくご紹介していきたいと思います。 そもそもCSSが分からない！といった方...

[初心者用]CSSで背景(background)の変更の仕方を徹底解説

2019.9.13

ウェブサイト制作やホームページ制作において、ページの背景は非常に重要な要素の一つです。 ページの背景が見づらいだけで、ユーザーがページを離脱してしまう可能性だってありますし、逆に見やすければアクセス数も上がることだってあります。 そこで、今回はそんな背景を装飾する際に利用するCSSのプロパティを...

CSSプロパティのoverflowとは?hidden,scroll,visibleそれぞれの使い方

2019.9.22

皆さんoverflowプロパティとはご存知でしょうか。 といった方に向けて、今回はoverflowプロパティとはどのようなものなのかを解説していきたいと思います。 具体的には、 overflowプロパティとは overflowプロパティの値 overflow-xとoverflow-y といった...