CSSのborder（境界線）の基本指定方法を徹底解説！初心者でもわかる太さ・種類・色の設定ガイド

borderの基本指定方法（太さ・種類・色）

先生と生徒の会話形式で理解しよう

生徒

「先生！CSSでボックスに線をつけたいんですけど、どうすればいいんですか？」

先生

「それならborder（ボーダー）を使えば簡単につけられますよ。ボックスのまわりに線を引くためのプロパティです。」

生徒

「borderって線の太さとか色も変えられるんですか？」

先生

「もちろんできます。CSSでは、borderの太さ・種類・色を自由に組み合わせて指定できますよ。」

生徒

「じゃあ、基本的な使い方から教えてください！」

1. borderとは？CSSでボックスに線をつけるプロパティ

CSSのborder（ボーダー）は、Webページ上のあらゆる要素（ボックス）の四方に「境界線」を引くためのプロパティです。文章を枠で囲んで目立たせたり、画像に額縁のような装飾を施したりと、Webデザインの基本となる重要な役割を持っています。

プログラミング未経験の方でも、「付箋（ふせん）の周りにペンで枠を書くこと」をイメージすれば分かりやすいでしょう。borderを設定する際は、以下の3つのルールをセットで決めるのが基本です。

太さ（border-width）：線の厚みを決めます（例：1pxの細い線、5pxの太い線）。
種類（border-style）：線の見た目を決めます（例：真っ直ぐな線、点々とした線）。
色（border-color）：線の色を決めます（例：赤、青、おしゃれなグレー）。

まずは、一番シンプルな「実線の枠線」を引くサンプルを見てみましょう。


<style>
    .simple-border {
        /* 太さ 種類 色 をまとめて指定 */
        border: 2px solid #333333;
        padding: 20px;
        background-color: #f9f9f9;
        text-align: center;
    }
</style>

<div class="simple-border">
    この文章の周りに「2px」の「実線（solid）」で「黒色」の枠線を引いています。
</div>

ブラウザ表示

このように、borderプロパティを使うだけで、ただのテキストがパッと目を引く「コンテンツの塊」に変わります。これら3つの要素は個別に指定することも、上記のように1行でまとめて短く書くことも可能です。次の章から、それぞれの設定を詳しく掘り下げていきましょう。

2. borderの基本的な指定方法

borderの基本形は次のようになります。


<style>
.box1 {
    border: 2px solid red;
    padding: 10px;
}
</style>

<div class="box1">赤い実線のボーダーです</div>

ブラウザ表示

上の例では、2pxが太さ、solidが線の種類、redが色です。これらを空白で区切って指定します。

CSSでは順番を変えても動作しますが、一般的には「太さ → 種類 → 色」の順で書くのが読みやすいです。

3. borderの太さ（border-width）を変えてみよう

線の太さはborder-widthで指定します。単位には「px（ピクセル）」がよく使われます。数が大きいほど太くなります。


<style>
.box-thin {
    border: 1px solid #00796b;
    padding: 10px;
}
.box-thick {
    border: 5px solid #00796b;
    padding: 10px;
}
</style>

<div class="box-thin">細いボーダー（1px）</div>
<div class="box-thick mt-2">太いボーダー（5px）</div>

ブラウザ表示

このように、太さを変えるだけでも印象がまったく違って見えます。強調したいボックスには太め、控えめにしたい部分には細めを使うと良いでしょう。

4. borderの種類（border-style）を理解しよう

線の種類はborder-styleで指定します。代表的な種類は以下の通りです。

solid：実線（最もよく使われます）
dotted：点線（ドット）
dashed：破線（線が途切れるタイプ）
double：二重線
groove：彫り込んだような立体的な線
ridge：盛り上がったような立体線
inset：内側に凹んだような線
outset：外側に浮き上がったような線
none：線を非表示にします


<style>
.box-solid { border: 3px solid #e53935; padding: 8px; }
.box-dotted { border: 3px dotted #e53935; padding: 8px; }
.box-dashed { border: 3px dashed #e53935; padding: 8px; }
.box-double { border: 4px double #e53935; padding: 8px; }
</style>

<div class="box-solid">solid（実線）</div>
<div class="box-dotted mt-2">dotted（点線）</div>
<div class="box-dashed mt-2">dashed（破線）</div>
<div class="box-double mt-2">double（二重線）</div>

ブラウザ表示

線の種類を変えるだけでも、ボックスの雰囲気がガラッと変わります。サイトのデザインや目的に合わせて使い分けましょう。

5. borderの色（border-color）を指定する

線の色はborder-colorで設定します。色は、CSSの色指定方法（キーワード・16進数・RGBなど）で自由に指定できます。


<style>
.box-red { border: 3px solid red; padding: 8px; }
.box-green { border: 3px solid #4caf50; padding: 8px; }
.box-blue { border: 3px solid rgb(33,150,243); padding: 8px; }
</style>

<div class="box-red">red（キーワード）</div>
<div class="box-green mt-2">#4caf50（16進数）</div>
<div class="box-blue mt-2">rgb(33,150,243)（RGB指定）</div>

ブラウザ表示

このように、borderの色は柔軟に変更できます。ブランドカラーや背景とのバランスを考えて設定するのがポイントです。

6. 各辺ごとにborderを指定する方法

borderは、上下左右の辺を個別に指定することもできます。たとえば、上だけに線を引きたいときはborder-topを使います。


<style>
.box-top { border-top: 3px solid #ff9800; padding: 10px; }
.box-bottom { border-bottom: 3px solid #ff9800; padding: 10px; }
.box-left { border-left: 3px solid #ff9800; padding: 10px; }
.box-right { border-right: 3px solid #ff9800; padding: 10px; }
</style>

<div class="box-top">上だけ線を引く</div>
<div class="box-bottom mt-2">下だけ線を引く</div>
<div class="box-left mt-2">左だけ線を引く</div>
<div class="box-right mt-2">右だけ線を引く</div>

ブラウザ表示

部分的に線をつけることで、見出しや区切り線としても活用できます。

7. borderプロパティを使いこなしてデザインを整えよう

borderを上手に使うと、ボックスの見た目を引き締めたり、内容を区切ったりすることができます。

例えば、カード風のデザインを作るときも、borderを少し薄い色にすると柔らかい印象になります。


<style>
.card-border {
    border: 1px solid #ccc;
    padding: 15px;
    background-color: #fafafa;
    border-radius: 5px;
}
</style>

<div class="card-border">ボーダーを使ったシンプルなカードデザインです。</div>

ブラウザ表示

このようにborderを使いこなすことで、Webデザインの印象を大きく変えることができます。初心者のうちは、まず基本の「太さ・種類・色」の3つをしっかりマスターしましょう。

（本文文字数：約2835文字）

2026年最新スキルアップ・実践セミナー