CSSのborder種類と使い方は？border・border-image・border-radiusの活用術も紹介

borderプロパティとは？

borderプロパティは、要素の外側に線を引くための設定で、簡単に言うと、HTMLタグを囲む線を作る機能です。

下記コードを実行するとボックスの外側を線で囲むことができます。

.box {
      border-width: 2px;
      border-style: solid;
      border-color: red;
    }

<div class="box">枠線がついたボックス</div>

▼実行結果

また、borderプロパティは太さ（width）、スタイル（style）、色（color）をまとめて指定することも出来ます。
短くコードをまとめられるので、基本的にはこちらの記述方法が望ましいです。

.box {
      border: 2px solid red;/* [太さ] [スタイル] [色]の指定は順不同です*/
    }

border-style一覧（見本付き）

borderにはさまざまなスタイルがあります。
一番よく使うのは solid（実線）ですが、他にも点線や二重線などがあります。

▼border-style一覧表

スタイル名	見た目	説明
solid	────────	実線（基本形）
dashed	─ ─ ─ ─	破線（点線より太め）
dotted	········	点線
double	════════	二重線
groove	立体的に凹んで見える枠線	立体感がある枠線
ridge	立体的に浮き上がって見える枠線	grooveの逆パターン
inset	内側にへこんだ枠線	要素が押し込まれたように見える
outset	外側に浮き出た枠線	要素が浮き出たように見える
none	なし	枠線を表示しない
hidden	なし（特殊用途）	特にテーブルで使用

実線（基本形）：solid

最も基本的な実線の枠線です。

.box {
      border: 10px solid red;
    }

破線（点線より太め）：dashed

破線（ダッシュ）で表示される線です。点線よりも粗めの破線になります。

.box {
      border: 10px dashed red;
    }

点線：dotted

点々で表示される細い線です。丸の集まりで構成されているので破線よりも滑らかに見えます。

.box {
      border: 10px dotted red;
    }

二重線：double

二重線の枠線です。指定した線の太さ＝線二本の太さ＋間隔になる為、太さが3px以下になると二重線を視認できなくなります。

.box {
      border: 10px double red;
    }

立体的に凹んで見える枠線：groove

線が立体的に凹んでいるように見える枠線です。（見ようによっては浮き上がって見えるかもいるかもしれません）

.box {
      border: 10px groove red;
    }

立体的に浮き上がって見える枠線：ridge

grooveの逆で、立体的に浮き上がって見える線です。

.box {
      border: 10px ridge red;
    }

要素が押し込まれたように見える線：inset

内側に押し込まれたような立体感のある枠線です。

.box {
      border: 10px inset red;
    }

要素が浮き出たように見える線：outset

外側に浮き出たように見える枠線です。

.box {
      border: 10px outset red;
    }

各辺ごとの設定（border-top, right, bottom, left）

CSSの border は要素の四辺すべてに枠線を設定しますが、特定の辺だけに枠線をつける設定も可能です。
これを使えば「上下だけ線をつける」「左だけ強調する」など自由にデザインできます。

.box {
      border-top: 10px solid red;
      border-right: 5px dashed blue;
      border-bottom: 8px double green;
      border-left: 3px dotted black;
    }

プロパティ	説明
プロパティ	説明
border-top	上の枠線だけを指定
border-right	右の枠線だけを指定
border-bottom	下の枠線だけを指定
border-left	左の枠線だけを指定

応用編：border-imageで装飾する

通常のborderは単色の枠線ですが、border-imageを使うことでグラデーションや画像を使った装飾的な枠線を作ることができます。
画像を使わずにCSSだけでリッチなデザインが実現できるため、ボタンやカードの枠線装飾に便利です。

borderにグラデーションをかける

  .gradient-border {
    border: 10px solid;
    border-image: linear-gradient(to right, #ff6b6b, #feca57, #48dbfb) 1;
  }

borderの右側だけかすれて見えるようにする

  .corner-border-black {
    border: 10px solid;
    border-image:
      linear-gradient(to right,
        black 15%,
        rgba(0, 0, 0, 0) 85%) 1 round;
  }

真ん中だけ色が濃いborder

  .box {
    border: 10px solid;
    border-image: linear-gradient(to right,
        transparent 0%,
        black 20%,
        black 80%,
        transparent 100%) 1;
  }

かぎ括弧風のborder

  .box {
    border: 10px solid;
    border-image: linear-gradient(to right,
        black 0px,
        black 20px,
        transparent 20px,
        transparent calc(100% - 20px),
        black calc(100% - 20px),
        black 100%) 1 round;
  }

応用編：border-radiusで角丸デザインにする

border-radiusを使うと、角を丸くしたデザインを簡単に作ることができます。
例えば、ボタンの角を丸くしたり、円形や楕円形の要素を作るときにもよく使われます。

  .button {
    border: 10px solid black;
    border-radius: 10px;
  }

border-radius: 9999px;を指定すれば、角丸を完全な半円にすることも可能です。

  .button {
    border: 10px solid black;
    border-radius: 9999px;
  }

まとめ

borderプロパティは、Webデザインにおいて最も基本的かつ重要なプロパティの一つです。
基本的な「太さ・スタイル・色」の指定方法から、各辺ごとの設定、さらに border-image を使った応用テクニックまで習得すれば、デザインの幅が一気に広がります。
実際にコーディングする際にborderは欠かせません。本記事を参考に、borderをマスターしましょう。