HTML・CSSで枠線の色を変える方法｜border-colorを初心者向けに解説

HTMLで作ったボックスやボタンの枠線を好きな色に変えたいのに、どこへ色を書けばよいのか分からないことがありますよね。colorを指定しても文字色しか変わらず、困りやすいところです。

枠線の色は、CSSのborderまたはborder-colorで変更します。まずはborder: 3px solid #2563eb;のように、太さ・種類・色をまとめて指定する方法から試すと確実です。

CSSのborderで枠線の色を変える

次の例では、「お知らせ」というボックスへ青い枠線を付けます。ブラウザで表示すると、次のようになります。

index.htmlへ、枠線を付けたい要素を記述します。CSSを適用する目印として、sample-boxというクラス名を付けてください。

<div class="sample-box">
  <h2>お知らせ</h2>
  <p>このボックスには、太さ3pxの青い実線を付けています。</p>
</div>

続いて、style.cssの末尾へ次のCSSを追加します。

.sample-box {
  padding: 32px;
  border: 3px solid #2563eb;
  border-radius: 8px;
  background: #f8fafc;
}

borderが枠線の指定です。paddingは枠線と内容の間隔、border-radiusは角の丸み、backgroundはボックスの背景色を表します。

borderは太さ・種類・色をまとめて指定する

border: 3px solid #2563eb;には、枠線を表示するために必要な3つの値が入っています。左から「太さ・種類・色」の順です。

• 3px：枠線の太さです。細い枠線なら1〜2px、強調したい場合は3px以上から調整します。
• solid：枠線の種類です。solidは途切れない実線を表します。
• #2563eb：枠線の色です。6桁の16進数カラーコードで青を指定しています。

枠線の種類は、実線のsolid以外に、破線のdashed、点線のdotted、二重線のdoubleなどがあります。色だけを変える場合も、最初に太さと種類が設定されているか確認してください。

border-colorだけでは枠線が表示されない

border-colorは、すでにある枠線の色だけを変更するプロパティです。太さや種類を作るものではないため、次のCSSだけでは枠線が表示されません。

.sample-box {
  border-color: #2563eb;
}

border-styleの初期値はnoneです。そのため、次のように太さと種類も一緒に指定します。

.sample-box {
  border-width: 3px;
  border-style: solid;
  border-color: #2563eb;
}

3行をまとめたものが、先ほどのborder: 3px solid #2563eb;です。最初に枠線を作るときはborder、あとから色だけ変えるときはborder-colorと使い分けると分かりやすいでしょう。

枠線の色を指定する4つの書き方

CSSでは、同じ色を複数の形式で表せます。既存サイトの書き方へ合わせると、コードを管理しやすくなります。

.color-name {
  border: 2px solid blue;
}

/* 16進数カラーコード */
.hex-color {
  border: 2px solid #2563eb;
}

/* RGB */
.rgb-color {
  border: 2px solid rgb(37 99 235);
}

/* 透明度40% */
.alpha-color {
  border: 2px solid rgb(37 99 235 / 40%);
}

透明度を下げすぎると、背景との違いが分かりにくくなります。区切りや入力状態を伝える重要な枠線には、十分に見える濃さを選んでください。

上下左右で枠線の色を変える

border-colorへ4つの値を書くと、上・右・下・左の順に別々の色を指定できます。完成後の表示で、4辺の色と順番を確認してみましょう。

index.htmlには、4辺の色を変えるボックスを用意します。

<div class="four-colors">
  <h2>4辺の色を個別に指定</h2>
  <p>border-colorは上・右・下・左の順です。</p>
</div>

style.cssでは、太さと種類を共通で指定し、色だけを4つ並べます。

.four-colors {
  padding: 32px;
  border-style: solid;
  border-width: 8px;
  border-color: #2563eb #16a34a #dc2626 #d97706;
}

• 値が1つ：上下左右が同じ色
• 値が2つ：1つ目が上下、2つ目が左右
• 値が3つ：1つ目が上、2つ目が左右、3つ目が下
• 値が4つ：上・右・下・左の順

1辺だけ変えたい場合は、border-top-color、border-right-color、border-bottom-color、border-left-colorも使えます。

枠線の色を使ったデザイン例

枠線はボックスを囲むだけでなく、重要な情報や操作中の場所を伝える役割にも使えます。ここでは、お知らせ・ボタン・入力欄の3例を作ります。

左枠線でお知らせを目立たせる

ボックス全体を囲まず、左側だけに太い枠線を付けると、内容を区切りながら圧迫感を抑えられます。

<div class="notice">
  <strong>POINT</strong>
  <p>重要な補足を、背景色と左側の青い枠線で見つけやすくします。</p>
</div>

.notice {
  padding: 22px 24px;
  border-left: 6px solid #2563eb;
  background: #eff6ff;
}

.notice strong {
  display: block;
  margin-bottom: 6px;
  color: #1d4ed8;
}

border-leftは左側だけに枠線を付ける指定です。背景も同系色の薄い青にすると、お知らせ全体のまとまりが伝わります。

ホバーで色が反転する枠線ボタン

通常時は白い背景と青い枠線にし、マウスポインターを重ねたときは背景を青へ変えます。

<a class="border-button" href="#detail">詳しく見る</a>

.border-button {
  display: inline-block;
  padding: 14px 28px;
  border: 2px solid #2563eb;
  border-radius: 8px;
  background: #fff;
  color: #2563eb;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.border-button:hover,
.border-button:focus-visible {
  background: #2563eb;
  color: #fff;
}

:hoverはマウスポインターを重ねた状態、:focus-visibleはキーボード操作でボタンへ移動した状態です。マウス以外でも変化が分かるよう、両方を指定しています。

入力中の欄を青い枠線で示す

フォームでは、現在入力している欄の枠線色を変えると、操作位置を見つけやすくなります。枠線の外側にはoutlineも残します。

<label for="email">メールアドレス</label>
<input class="form-input" id="email" type="email">

.form-input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #94a3b8;
  border-radius: 6px;
  font: inherit;
}

.form-input:focus {
  border-color: #2563eb;
  outline: 3px solid rgb(37 99 235 / 25%);
  outline-offset: 2px;
}

outline: none;だけを書いてフォーカス表示を消すと、キーボード利用者が操作位置を見失います。枠線を変える場合も、外側の目印を残してください。

枠線の色が変わらないときの確認点

1. 枠線の種類があるか：border-colorだけでは表示されません。border-style: solid;またはborderを指定します。
2. 太さが0になっていないか：border-width: 0;やborder: 0;が後から適用されていないか確認します。
3. クラス名が一致しているか：HTMLのclass="sample-box"とCSSの.sample-boxを見比べます。
4. 別のCSSに上書きされていないか：同じ要素へ複数の指定がある場合は、後から読み込まれたCSSや詳細度の高いCSSが優先されます。
5. 背景と同じ色ではないか：確認中は#2563ebなど見分けやすい色へ一度変更します。

文章の話題を区切る横罫線そのものを作りたい場合は、hrタグとborder-topの使い分けも確認しておくと理解が深まります。

まとめ

• 枠線の色はCSSのborderまたはborder-colorで変更する
• 最初に枠線を作るときは「太さ・種類・色」をまとめて指定する
• border-colorだけでは、種類の初期値がnoneなので枠線は表示されない
• 上下左右の色は、1〜4個の値または辺ごとのプロパティで変更できる
• ボタンや入力欄では、色だけに頼らずフォーカス表示も残す

まずはborder: 3px solid #2563eb;をそのまま試し、枠線が表示されたことを確認してから、色・太さ・角の丸みを調整してください。1つずつ値を変えると、どの指定が見た目へ影響したのか理解しやすくなります。