【基本】CSS Borderの書き方を実例付きで丁寧に解説

（最終更新日：2023年6月）

✔このような方へ向けて書かれた記事となります

「CSSボーダーって何ができるのだろうか？」
「CSSボーダーの指定方法が知りたい」
「CSSボーダーの実例が見たい」

✔当記事を通じてお伝えすること

CSSボーダーの基本概念
CSSボーダーの指定方法やその応用
CSSボーダーの実例

当記事では、CSSボーダーの基本から応用まで、実例を用いてわかりやすく解説しています。

ぜひ最後までご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/05/16 14:24:18時点 Amazon調べ-詳細)

CSS Borderで知っておくべきこと4選

まずはCSSのBorderについて、知っておくべきことを確認していきます。

Borderの基本概念を理解することは、CSSを用いたウェブページのデザインにおいて重要な一歩です。

Borderとは？
Borderの役割
Borderの重要性
Borderの構成要素

Borderとは？

Borderとは、HTML要素の周囲に表示される線のことを指します。

ウェブページ上のほぼ全ての要素に対して設定可能です。

文字
画像
各種コンテンツブロック

Borderの役割

Borderの主な役割は以下の2つ。

要素をほかから視覚的に区別する
デザインに深い影響を与える

例えばボタンやカード、テーブルなどの要素にBorderを適用すると、ユーザーに対して情報が区切られていることを明確に示せます。

<style>
.button {
  padding: 10px 20px;
  border: 2px solid #000;
  border-radius: 5px;
}

.card {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
}

.table {
  border-collapse: collapse;
}

.table th, .table td {
  border: 1px solid #000;
  padding: 10px;
}
</style>

<button class="button">Click Me</button>

<div class="card">
  <h2>Card Title</h2>
  <p>This is a card content.</p>
</div>

<table class="table">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>

Borderの重要性

CSS Borderは、Webページの見た目を形成するために、重要な機能のひとつです。

以下のようなことが実現でき、ページデザインに特徴をもたせられます。

視覚的な階層化: 適用した要素が他要素と区別され、視覚的に際立つ
注目要素の強調: ユーザーにクリック可能な要素であることを明示し、注目を引く
グルーピングと整理: データのグループ化や整理が容易になる
要素の形状変更: より柔らかい印象を与えらえる

Borderの構成要素

Borderは主に3つの属性から構成されています。

border-width（ボーダーの厚さ）
border-style（ボーダーのスタイル）
border-color（ボーダーの色）

これらの属性を組み合わせて、さまざまなデザインを実現することが可能です。

border: 2px dashed blue;

CSS Borderのプロパティ詳細

このセクションでは、「CSS Borderのプロパティ詳細」について解説します。

Borderを適切に活用するためには、各プロパティの理解が不可欠です。

border-width
border-style
border-color
省略記法
個別側の指定 (border-top, border-right, border-bottom, border-left)
border-radius

border-width

border-widthプロパティは、ボーダーの幅を指定するもの。

構文はシンプルです。

border-width: 上右下左;

もしくは引数が2つの場合は以下のようになります。

border-width: 上下左右;

border-with: 10pxなどとひとつのときは、上下左右のすべてに適用されます。

使える値は以下のとおりです。

具体的な数値（pxなどの単位を使用）
相対的なキーワード（thin、medium、thick）

こちらが具体例です。

/* 上下のボーダーを4px、左右のボーダーを2pxに設定 */
border-width: 4px 2px;

/* 上のボーダーを1px、左右のボーダーを2px、下のボーダーを3pxに設定 */
border-width: 1px 2px 3px;
/* 上のボーダーを1px、右のボーダーを2px、下のボーダーを3px、左のボーダーを4pxに設定 */

border-width: 1px 2px 3px 4px;

border-widthプロパティを活用すれば、各辺のボーダーの幅を個別に設定することが可能です。

border-style

border-styleプロパティは、ボーダーのスタイルを指定します。

構文もシンプルです。

border-style: 上右下左;

ひとつや2つのときの動作はほかと同じです。

値として許可されているキーワードはこちらです。

none（ボーダーなし）
solid（一色の線）
dotted（点線）
dashed（破線）
double（二重線）

例はこちら。

/* 上下のボーダーをsolid、左右のボーダーをdashedに設定 */
border-style: solid dashed;

/* 上のボーダーをsolid、左右のボーダーをdashed、下のボーダーをdottedに設定 */
border-style: solid dashed dotted;

/* 上のボーダーをsolid、右のボーダーをdashed、下のボーダーをdotted、左のボーダーをdoubleに設定 */
border-style: solid dashed dotted double;

border-color

border-colorプロパティは、ボーダーの色を指定します。

構文は以下の通りです。

border-color: 上右下左;

値として使えるのはこちら。

色名（red、greenなど）
RGB
RGBA
HEX

例は以下のとおりです。

/* 上下のボーダーを赤色、左右のボーダーを青色に設定 */
border-color: red blue;

/* 上のボーダーを赤色、左右のボーダーを青色、下のボーダーを緑色に設定 */
border-color: red blue green;

/* 上のボーダーを赤色、右のボーダーを青色、下のボーダーを緑色、左のボーダーを黄色に設定 */
border-color: red blue green yellow;

省略記法：一行ですべて指定

各プロパティを一度に設定する省略記法があります。

「border」プロパティと呼ばれ、より効率的にスタイルを適用できる方法です。

以下に具体的な使用例を示します。

/* 全ての辺に、太さ2px、スタイルsolid、色赤のボーダーを設定 */
border: 2px solid red;

このように、borderプロパティを用いることで、1行のコードでボーダーのスタイルを全て指定できます。

コードの冗長性を減らし、メンテナンス性を向上させられるのです。

ボーダー位置の個別指定

個別の辺を指定して、ボーダースタイルを設定できます。

以下のプロパティで、それぞれ上、右、下、左の辺にスタイルを適用可能です。

border-top
border-right
border-bottom
border-left

以下に具体的な使用例を示します。

/* 上辺に、太さ2px、スタイルsolid、色赤のボーダーを設定 */
border-top: 2px solid red;

/* 右辺に、太さ2px、スタイルdashed、色青のボーダーを設定 */
border-right: 2px dashed blue;

border-radius

border-radiusプロパティは、ボーダーの角を丸くするために使用するもの。

構文は以下の通りです。

border-radius: 左上右上右下左下;

値は長さまたはパーセンテージで指定し、大きな値を指定すれば指定するほど角が丸くなります。

使用例はこちら。

/* 全ての角を10pxで丸くする */
border-radius: 10px;

/* 左上と右下の角を50%で丸くする */
border-radius: 50% 0 50% 0;

CSS Borderの実践的な応用

こちらでは、CSS Borderをどのように実際のサイトデザインに応用できるかを示していきます。

以下のようなテーマで進めていきます。

初心者向けのCSS Border実例
テーブルの装飾
要素の強調表示
カード型デザイン
ボタンのホバーエフェクト
図形の作成
区切り線の代わりに利用する方法

初心者向けのCSS Border実例

初めてCSS Borderを学習する方向けに、基本的なボーダースタイルの設定方法を示します。

非常にシンプルな例ですが、これが理解できればCSS Borderの基本はマスターしたといえるでしょう。

例えば、HTMLのdiv要素に対して、2pxの太さ、solid（実線）のスタイル、黒色のボーダーを設定してください。

答えはこちらです。

div {
  border: 2px solid black;
}

このコードは、全てのdiv要素に対して、上記のボーダースタイルを適用します。

これがCSS Borderの基本的な使用法です。

テーブルの装飾

テーブルの装飾にも、CSS Borderは活用できます。

テーブルの各セルや行、列に、見やすく、整理された形で表示できるのです。

例えば、テーブルの全てのセルに1pxの実線のボーダーを適用する方法は以下のとおり。

table td {
  border: 1px solid black;
}

table要素内の全てのtd要素（テーブルのセルを表す）に対して、1pxの太さ、solid（実線）のスタイル、黒色のボーダーを適用します。

これにより、テーブルが整然とした見た目になり、その内容がより明瞭に理解できるようになります。

要素の強調表示

ボーダーは、ウェブページ内の特定の要素を強調表示するためにも使用されます。

例えば、重要な通知や特別なオファー、特定のテキストブロックなど、ユーザーの注意に引きつけるために、目立つボーダーを使ってみましょう。

次のCSSコードは、背景色が黄色で、太い赤いボーダーの強調ブロックを作成する例です。

.highlight {
  background-color: yellow;
  border: 5px solid red;
}

.highlightクラスが適用された要素は、その他のコンテンツから明確に区別され、ユーザーの注目を集められます。

カード型デザイン

カード型のデザインを使えると便利です。

ウェブページ上で情報を表示するために、よく使われる方法になります。

ボーダーで、カード要素を定義して、他の背景要素から区別するデザイン。

border-radiusを使用してカードの角を丸めると、デザインがさらに洗練されます。

以下が一例です。

.card {
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  padding: 20px;
}

このスタイルを.cardクラスに適用すると、その要素は独立したカードのように見えます。

ボタンのホバーエフェクト

CSSのボーダーは、ボタンのホバーエフェクト（マウスが上に乗った時の効果）を作るのにも使われます。

ホバーエフェクトにより、ユーザーの操作感を高められるからです。

例えば次のCSSコードは、ユーザーがマウスでボタンに触れたときにボーダーの色を変更するホバーエフェクトです。

.button {
  border: 2px solid #000;
  padding: 10px 20px;
  transition: border-color 0.3s ease;
}

.button:hover {
  border-color: #f00;
}

図形の作成

CSSのボーダーを使用して、さまざまな形状の作成も可能です。

基本的な形状から始めて、複雑な図形まで作成できます。

円形
楕円形
三角形
菱形

円形のボーダー

.border-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid black;
}

楕円形のボーダー

.border-ellipse {
  width: 300px;
  height: 200px;
  border-radius: 50% / 30%;
  border: 2px solid black;
}

三角形のボーダー

.border-triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid black;
}

菱形のボーダー

.border-diamond {
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
  border: 2px solid black;
}

区切り線の代わりに利用する方法

ウェブページ内で情報を区分するために、ボーダーを区切り線として利用することもあります。

これはテキストや画像など、異なるコンテンツのブロックを明確に区別するのに有用です。

例えば、border-topやborder-bottomプロパティを使用して、上下のボーダーを設定することで、水平線を作成できます。

border-bottom: 1px solid black;

レスポンシブデザインとブラウザの互換性

こちらでは、レスポンシブデザインとブラウザの互換性についてお伝えします。

それぞれの項目については以下の通りです。

メディアクエリを使った対応方法
フレームワークを利用する方法
対応しているブラウザ
考慮すべきこと
オンラインツールを利用したチェック方法

メディアクエリを使った対応方法

レスポンシブデザインとは、デバイスの画面サイズに応じてウェブサイトのレイアウトやスタイルを動的に調整する手法のことです。

CSSのメディアクエリを使用すると、特定の画面幅やデバイスタイプに基づいてスタイルを適用することができます。

例えば、ボーダーの幅や色をスマートフォンとPCで異なるように設定することが可能です。

/* デフォルトのボーダースタイル */
.border-box {
  border: 2px solid black;
}

/* スマートフォン向けのボーダースタイル */
@media screen and (max-width: 768px) {
  .border-box {
    border: 1px dashed red;
  }
}

/* PC向けのボーダースタイル */
@media screen and (min-width: 769px) {
  .border-box {
    border: 4px dotted blue;
  }
}

フレームワークを利用する方法

BootstrapやFoundationなどのCSSフレームワークは、レスポンシブデザインの機能を簡単に追加できます。

これらのフレームワークにはプリセットされたクラスが含まれており、それらを利用することで独自のCSSを書くことなく、レスポンシブなボーダースタイルを実装することが可能です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <title>Bootstrap Border Example</title>
</head>
<body>
  <div class="container">
    <div class="border p-4">
      <h1 class="border-bottom pb-2">Welcome to My Website</h1>
      <p class="border-left pl-3">This is a sample paragraph with a left border.</p>
      <button class="btn btn-primary btn-lg border-0">Click Me</button>
    </div>
  </div>
</body>
</html>