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

生徒

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

先生

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

生徒

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

先生

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

生徒

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

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

CSSのborder（ボーダー）は、ボックス（要素）の外側に線を引くためのプロパティです。たとえば、画像や文章のまわりを囲んで枠線をつけるときに使います。

borderを設定するときは、次の3つの要素を組み合わせて指定します。

太さ（border-width）：線の太さを指定します。
種類（border-style）：線の形（実線・点線など）を指定します。
色（border-color）：線の色を指定します。

これらを組み合わせて、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つをしっかりマスターしましょう。