【初心者向け】CSSのborderで枠線を作る方法

CSSのborderは要素の周囲にボーダー（境界線）を描くために使用されます。
このプロパティを利用することでボタンや入力欄や表などのさまざまな枠線を作れるので、是非使い方をマスターしましょう！

基本的な使い方

borderには指定可能なプロパティが「幅（太さ）」「種類」「色」の３種類存在します。

そのうち、「種類」は必須パラメータになります。

また線の種類は１０種類存在します。

それぞれの見た目は以下のようになります。

See the Pen css-border1 by Usagi (@naniwa_usagi) on CodePen.

線の太さを変える

線の太さはpx・rem・mmなどの「数値 + 単位」の他にthin（細い）・medium（標準）・thick（太い）のようなキーワードでの指定も可能です。

また指定箇所の決まりはなく、線の種類の前後どちらに記述しても問題ありません。

See the Pen css-border2 by Usagi (@naniwa_usagi) on CodePen.

線の色を変える

色はカラーコード（#000など）やカラーネーム（blackなど）、RGB（rgb(0,0,0)など）、RGBA（rgba(0,0,0,0.5)など）で指定します。

指定箇所も線の太さと同様決まりはなく、borderプロパティのどの位置に記述しても問題ありません。

See the Pen css-border3 by Usagi (@naniwa_usagi) on CodePen.

個別に線の太さや色を変える

borderの線の太さや色を個別に指定したい場合はborder-widthやborder-colorを使います。
設定するパラメータの数によって

パラメータを２つ設定した場合

１つ目の値が上辺と底辺に、２つ目の値が左辺と右辺に適用されます。

See the Pen css-border4 by Usagi (@naniwa_usagi) on CodePen.

パラメータを３つ設定した場合

１つ目の値が上辺に、２つ目の値が左辺と右辺に、３つ目の値が底辺に適用されます。

See the Pen css-border4-1 by Usagi (@naniwa_usagi) on CodePen.

パラメータを４つ設定した場合

上辺、右辺、底辺、左辺の順にそれぞれ適用されます。

See the Pen css-border4-2 by Usagi (@naniwa_usagi) on CodePen.

特定の辺だけを編集したい場合

border-widthやborder-colorは各辺の太さや色を変えますが、特定の辺だけを設定するプロパティも存在します。

たとえば、上辺だけを変えたい場合はborder-top-widthやborder-top-colorを使うと記述量が抑えられるのでおすすめです。

See the Pen css-border4-3 by Usagi (@naniwa_usagi) on CodePen.

応用編

各辺を異なる枠線にする

各辺ごとに線の種類を変えることも可能です。

See the Pen css-border4-5 by Usagi (@naniwa_usagi) on CodePen.

影と組み合わせる

影を作ることができるプロパティbox-shadowと組み合わせることで、より効果的な見た目を作ることが可能です。

See the Pen css-border4-6 by Usagi (@naniwa_usagi) on CodePen.

線の色をグラデーションにする

linear-gradientはCSS関数でグラデーションの再現が可能です。

See the Pen css-border4-4 by Usagi (@naniwa_usagi) on CodePen.

まとめ

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

CSSのborderは他にも境界線の形を変えることも可能です。
以下の記事で解説していますので併せて参考にしてみてください。