CSSで背景色・枠線・角丸を設定する方法｜background-color・border・border-radiusを初心者向けに解説

Webページのカードやボタンを作るとき、「背景に色を付けたい」「周囲を線で囲みたい」「四角い角を少し丸くしたい」と思うことがあります。CSSでは、主にbackground-color、border、border-radiusの3つを組み合わせて見た目を整えます。

背景色・枠線・角丸は似た装飾に見えても、変更する場所が違います。まず3つの役割を分けると、どの値を直せばよいか判断しやすくなります。

HTMLのタグとclassを見たことがあるCSS初心者向けに、基本の書き方から、1つのHTMLファイルでカードを作る練習まで解説します。表示が変わらない場合も、症状に合う確認先を選べます。CSSの「プロパティ: 値;」の形がまだ曖昧な場合は、先にCSSの基本的な書き方を確認すると読み進めやすくなります。

CSSの背景色・枠線・角丸とは

プロパティは、CSSで変更する項目の名前です。箱の内側を塗る背景色、境界を囲む枠線、角の形を変える角丸を、次のように使い分けます。

たとえば、次のCSSを指定すると、薄い背景色、2pxの実線、16pxの角丸を持つカードになります。

.card {
  background-color: #f5f6f2;
  border: 2px solid #536048;
  border-radius: 16px;
  padding: 24px;
}

この例のpaddingは、文章と枠線の間に内側余白を作る指定です。background-colorとborderがどこまで広がるかを理解するには、CSSのボックスモデルも一緒に考えると整理しやすくなります。

背景色はcontent（内容部分）とpadding（内側余白）に表示され、初期設定ではborder（枠線）の下まで塗られます。 枠線が不透明なら、その下の背景色は通常見えません。背景色はmarginには塗られません。

background-colorで背景色を設定する

background-colorは、要素の背景へ単色を指定するプロパティです。基本構文は次のとおりです。

セレクター {
  background-color: 色;
}

たとえば、.noticeというclassが付いた要素へ薄いベージュの背景色を付ける場合は、次のように書きます。

.notice {
  background-color: #f5ead8;
}

background-colorの初期値はtransparentです。transparentは透明という意味なので、何も指定しなければ、多くの場合は親要素やページの背景が透けて見えます。

背景色に使うカラーコード・色名・rgb()

背景色には、カラーコード、色名、rgb()など、CSSで利用できる色の値を指定できます。

.sample-a {
  background-color: #f5f6f2;
}

.sample-b {
  background-color: lightblue;
}

.sample-c {
  background-color: rgb(245 246 242);
}

初心者のうちは、デザインデータと照合しやすいカラーコードから始めると扱いやすいでしょう。文字色の指定方法は、CSSで文字の色・大きさ・太さを変える方法で詳しく解説しています。

背景色とpadding・marginの関係

背景色は文章のすぐ後ろだけでなく、paddingで作った内側余白にも表示されます。

.message {
  background-color: #f5f6f2;
  padding: 20px;
}

このため、背景色を付けた箱で文章の周囲に余裕を持たせたいときは、marginではなくpaddingを組み合わせます。marginは枠線の外側にあるため、その領域には要素自身の背景色が塗られません。

MDNのbackground-colorの解説では、背景画像を併用する場合、背景色は画像の背後に描画されることも確認できます。この記事では単色の基本に絞り、背景画像やグラデーションは扱いません。

borderで枠線を設定する

borderは、要素の周囲へ枠線を設定する一括指定プロパティです。一括指定とは、関連する複数の設定を1行にまとめて書く方法です。

.box {
  border: 2px solid #536048;
}

この1行には、枠線の幅、種類、色の3つが含まれています。

borderの幅・種類・色と個別指定

3つを個別に書くと、次のようになります。

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

表示結果は、基本的にborder: 2px solid #536048;と同じです。4辺を同じ枠線にするなら、一括指定の方が短く、設定のまとまりも読み取りやすくなります。

ブラウザーは、2pxを太さ、solidを線の種類、#536048を色として見分けるため、3つの順番を入れ替えても解釈できます。ただし、チームで読むコードでは「幅・種類・色」の順に統一すると確認しやすいでしょう。最初は幅・種類・色の3つをセットで書くのがおすすめです。

solid・dashed・dottedで線の種類を変える

よく使うborder-styleの値は次の3つです。

.solid-box {
  border: 2px solid #536048;
}

.dashed-box {
  border: 2px dashed #536048;
}

.dotted-box {
  border: 2px dotted #536048;
}

• solid：1本の実線
• dashed：破線
• dotted：点線

通常のカードや入力欄にはsolidが使いやすく、補助的な案内や仮の領域を示すときはdashedやdottedが候補になります。線の種類は意味とデザインの両方に合わせ、同じページ内で増やしすぎないようにします。

border-styleを省略したときの表示

次のCSSは、太さと色を指定していますが、枠線が表示されません。

.box {
  border: 2px #536048;
}

原因は、border-styleを省略したときの初期値がnoneだからです。border-widthとborder-colorだけがあっても、線の種類が「なし」なら描画されません。borderの一括指定では、線の種類も書きます。

MDNのborderの解説でも、borderがborder-width・border-style・border-colorをまとめることと、styleを指定しない場合は境界線が表示されないことが示されています。

border-radiusで角を丸くする

border-radiusは、要素の背景や枠線の角を丸めるプロパティです。4つの角を同じ丸みにする基本構文は、次のとおりです。

.box {
  border-radius: 16px;
}

値を大きくすると丸みが強くなります。ただし、箱に収まらないほど大きな値はブラウザーが縮めて調整します。0なら角は四角いままです。border-radiusはborderがなくても背景の角を丸めます。

.label {
  background-color: #f5ead8;
  border-radius: 8px;
  padding: 8px 12px;
}

この例にはborderがありませんが、背景色の角は丸く表示されます。border-radiusという名前でも、枠線を付けることは必須ではありません。

border-radiusのpxと%の違い

border-radiusにはpxや%を指定できます。

.card {
  border-radius: 16px;
}

.shape {
  border-radius: 50%;
}

16pxは角の半径を一定の長さで指定します。カード、ボタン、入力欄など、同じデザインルールで角丸を揃えたい場面に向いています。

%は箱の幅と高さを基準に計算されます。横方向の半径は幅、縦方向の半径は高さが基準になるため、縦横の長さが違う箱へ50%を指定すると、円ではなく楕円になります。単位の基準が不安な場合は、px・%・em・remの違いも確認してください。

border-radiusで正円を作る条件

正円を作るには、paddingと枠線を含む外側の幅・高さを同じにし、border-radius: 50%;を指定します。次のHTMLにCSSを当てると、外側が120pxの正円になります。

<div class="circle"></div>

.circle {
  box-sizing: border-box;
  width: 120px;
  height: 120px;
  padding: 0;
  background-color: #c28a3d;
  border-radius: 50%;
}

box-sizing: border-box;は、指定した幅・高さにpaddingと枠線を含める設定です。初期値のcontent-boxでは、左右と上下に異なる余白を足すと、widthとheightが同じでも外側は正方形にならないことがあります。計算範囲はMDNのbox-sizingの解説でも確認できます。

正円にするには、枠線を含む外側の縦横をそろえて50%を指定します。外側の幅が160px、高さが100pxなら、同じ50%でも楕円になります。

border-radiusは1〜4個の値でも指定できますが、初心者はまず1個の値で4つの角を揃える書き方から始めると安全です。詳しい値の並び方や楕円の指定は、MDNのborder-radiusの解説で確認できます。なお、負の値は無効です。

背景色・枠線・角丸を組み合わせてカードを作る

PCのテキストエディターとブラウザーを用意し、練習用の新しいフォルダーで試します。同名のファイルを上書きしないようにしてください。CSSはHTML内の<style>へまとめて書くため、別のCSSファイルやWordPressへの入力は不要です。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSSのカード練習</title>
  <style>
    body {
      margin: 0;
      padding: 24px;
      color: #3d433b;
      font-family: sans-serif;
      line-height: 1.8;
    }
    .info-card {
      box-sizing: border-box;
      max-width: 480px;
      background-color: #f5f6f2;
      border: 2px solid #7a8e6d;
      border-radius: 16px;
      padding: 24px;
    }
    .info-card h2 { margin-top: 0; }
    .info-card p { margin-bottom: 0; }
  </style>
</head>
<body>
  <article class="info-card">
    <h2>CSSの学習メモ</h2>
    <p>背景色・枠線・角丸を組み合わせたカードです。</p>
  </article>
</body>
</html>

最後の2つのCSSは、見出しの上と段落の下にブラウザーが最初から付ける余白を0にしています。.info-cardはclassセレクターなので、HTMLのclass="info-card"とつづりをそろえます。選び方はCSSセレクタの要素・class・idの違いで確認できます。

値を1つずつ変えて、変化を確かめる

次の変更を1つずつ試します。毎回ファイルを保存し、ブラウザーを再読み込みしてから見比べてください。

1. background-color: #f5f6f2;をbackground-color: #ffffff;に変えると、カードの背景が白くなる。確認後は元に戻す。
2. borderのsolidをdashedに変えると、太さと色を保ったまま実線が破線になる。確認後は元に戻す。
3. border-radius: 16px;をborder-radius: 0;に変えると、角が四角くなる。確認後は16pxに戻す。

1回に変える値を1つにすると、どの指定が見た目を変えたか分かります。3つの変化を確認できたら、値を元に戻して保存・再読み込みし、練習は完了です。変化がない場合は、後半の「背景色・枠線・角丸が反映されないときの確認順」へ進んでください。

1辺だけの枠線と角ごとの丸みを設定する

4辺や4つの角を同じにする必要がない場合は、個別のプロパティを使えます。

border-leftで左側だけに線を付ける

左側だけに枠線を付けた案内ボックスは、次のように作れます。

.note {
  background-color: #f5f6f2;
  border-left: 6px solid #c28a3d;
  padding: 16px 20px;
}

border-leftも、幅・種類・色をまとめる一括指定です。同様に、border-top、border-right、border-bottomがあります。

既にborderで4辺を指定した後、一部だけ変えることもできます。

.box {
  border: 1px solid #7a8e6d;
  border-left-width: 6px;
  border-left-color: #c28a3d;
}

この例では、同じ.boxの中でborderの後に左枠の指定を書いているため、左側だけ太さと色が変わります。順番を逆にすると、後のborderが左側も含む4辺を設定し直します。

border-top-left-radiusで1つの角だけ丸める

角ごとに丸みを変えるプロパティもあります。

.box {
  border-top-left-radius: 24px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 24px;
  border-bottom-left-radius: 8px;
}

ただし、角ごとに異なる値を多用すると、デザインの規則が見えにくくなります。特別な形を作る目的がなければ、まずborder-radiusの1つの値で揃えましょう。

読みやすい背景色・枠線・角丸の決め方

CSSとして正しい表示でも、色や線が読みづらければ、情報を伝える目的を果たせません。文字の読みやすさ、色以外の手掛かり、枠線・角丸の統一を確認します。

文字と背景のコントラストを確保する

背景色を変えたら、文字色との明るさの差も確認します。薄い灰色の文字を白に近い背景へ置くと、CSSは適用されていても読みにくくなります。

コントラスト比は、文字と背景の明るさの差を数値で表したものです。通常サイズの本文では4.5:1以上が目安です。MDNのbackground-colorのアクセシビリティ解説でも、背景色と文字色の十分なコントラストが重要だと説明されています。

色だけで情報を区別しないことも大切です。たとえばエラーを赤い枠線だけで示すのではなく、「入力してください」などの文章やアイコンを併用します。

枠線と角丸のルールを揃える

同じ種類のカードでは、枠線の太さと角丸の値を揃えます。

この値が唯一の正解という意味ではありません。大切なのは、ページ内で同じ役割に同じルールを使うことです。装飾の種類を増やす前に、再利用できる基準を決めると、後から修正しやすくなります。

背景色・枠線・角丸が反映されないときの確認順

まず編集したファイルを保存し、同じファイルをブラウザーで再読み込みします。それでも変わらない場合は、下の表から自分の症状の行だけ確認してください。試す前の値はメモしておきます。

期待した表示になったら、確認のために付けた背景色や枠線を必要に応じて元へ戻し、保存・再読み込みで再確認すれば終了です。直らない場合だけ、対象のclass名とCSSの書き方を見直します。他のCSSによる上書きは、その後の確認候補です。

1. 対象：CSSを当てたい要素を選べているか
2. 書き方：プロパティ名、コロン、セミコロン、値に誤りがないか
3. 必要な値：border-styleなど、表示に必要な値が揃っているか
4. サイズ：border-radius: 50%なら枠線を含む外側の幅と高さが同じか
5. 上書き：後のCSSや優先度の高いルールで変更されていないか

対象と書き方を確認し、症状に関係する値・サイズを調べると、原因を一つずつ除外できます。練習コードでは表示できるのに自分のページだけで変わらない場合は、別のCSSによる上書きも確認します。

次のような値は無効です。

.box {
  background-color: #gggggg;
  border-radius: -10px;
}

#ggggggは有効なカラーコードではなく、border-radiusは負の値を受け付けません。この例では、無効な値を持つ宣言（プロパティ: 値;のまとまり）が無視されます。ほかの正しい宣言まで無効になるわけではありません。ただし、セミコロンや波括弧が欠けた場合は、後の記述の解釈にも影響することがあります。

背景や枠線の仕様全体を確認したい場合は、W3CのCSS Backgrounds and Borders Module Level 3が一次資料です。初心者はまずMDNの日本語解説とこの記事の最小例で動きを確かめ、必要になった範囲を仕様書で確認すると読み進めやすいでしょう。

よくある質問

background-colorとbackgroundの違いは何ですか？

background-colorは背景の単色だけを指定します。backgroundは、背景色、背景画像、位置、繰り返しなどをまとめて設定できる一括指定です。単色だけを変えたいなら、意図が明確なbackground-colorが分かりやすいでしょう。

borderを付けると要素の幅は広がりますか？

width: 200px;など幅を指定し、box-sizing: content-box;で表示している場合は、widthが内容部分だけの幅を表すため、左右のpaddingやborderはその外側に加わり、要素全体が広くなります。この計算方法をbox-sizing: content-box;と呼びます。box-sizing: border-box;なら、borderとpaddingを指定幅の内側へ含められます。詳しい計算はCSSのボックスモデルで確認してください。

まとめ

背景色はbackground-color、枠線はborder、角丸はborder-radiusで指定します。枠線には線の種類が必要で、正円には枠線を含む外側の縦横をそろえる条件があります。

まずはカードの練習コードを保存して開き、背景色・線の種類・角丸の値を1つずつ変えてみてください。変化を確かめてから、必要な装飾を加えていきましょう。

目的別に次の記事を選ぶ

次に学ぶ内容は、困っている箇所に合わせて選びましょう。

枠線を付けると幅が広がる理由や、内側と外側の余白の違いを整理したい場合は、ボックスモデルの記事が役立ちます。

あわせて読みたい

CSSのボックスモデルとは？content・padding・border・marginの仕組みを初心者向けに解説 CSSボックスモデルのcontent・padding・border・marginの4層、widthの計算、box-sizing、余白の使い分け、開発者ツールでの確認順を初心者向けに解説します。