実行できるCSSドキュメント: CSS border

Q: CSS で枠線を付けるには？

太さ、種類、色をショートハンドで指定します: border: 2px solid #2563eb;。いちばん大事なのは種類です。種類がないと border の種類は none になり、枠線は描かれません。

Q: CSS の枠線が表示されないのはなぜですか？

ほとんどの場合、線の種類が指定されていないからです。border-style の初期値は none なので、border: 2px #2563eb; や border-color: red; だけでは何も描かれません。solid、dashed などの種類を追加しましょう。

Q: CSS で角を丸くするには？

border-radius を使います: border-radius: 8px; で 4 つの角すべてが丸くなります。正方形の要素に border-radius: 50%; を指定すると円になり、999px のような大きな値ではピル型になります。border がなくても背景の角が丸くなります。

Q: 片側だけに枠線を付けるには？

辺ごとのプロパティを使います: border-bottom: 2px solid #e5e7eb;。テキストが始まる側に付けるなら border-inline-start を使います。これは右から左の言語でも正しく動きます。

border のショートハンド

border は要素の周り、padding と margin の間に線を描きます。ショートハンドには太さ、種類、色の 3 つを順不同で書きます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

部分	個別プロパティ	値	初期値
太さ	`border-width`	`1px`, `0.2em`, `thin`, `medium`, `thick`	`medium`
種類	`border-style`	`solid`, `dashed`, `dotted`, `double` など	`none`
色	`border-color`	任意の色	`currentColor` (文字色)

省略できないのは種類です。初期値が none なので、border: 2px #2563eb; では何も描かれません。色を省略すると、枠線は要素の文字色になります。

線の種類

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double で 2 本の線を見せるには 3px 以上必要です。groove、ridge、inset、outset は色に陰影を付けて立体的に見せるもので、ブラウザによって少し見た目が違います。hidden は none と同じに見えます。違いが出るのは border を結合したテーブルの中だけで、これは HTML テーブルの枠線のページで解説しています。

1 辺ずつ指定する

各辺には専用のショートハンド (border-top、border-right、border-bottom、border-left) があり、各部分にも border-top-color のような辺ごとの個別プロパティがあります。論理プロパティの border-inline-start と border-block-end は書字方向に従います:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color、border-width、border-style には、padding と同じ時計回りの順番 (上、右、下、左) で 1 から 4 つの値を書けます。

border-radius で角を丸くする

border-radius は枠線と背景の角を丸くします。そのため border がまったくない要素でも使えます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

値	結果
`border-radius: 8px`	すべての角を 8px 丸める
`border-radius: 50%`	正方形なら円、長方形なら楕円
`border-radius: 999px`	ピル型: 短い辺が完全な半円になる
`border-radius: 8px 0`	左上と右下が 8px、ほかの 2 つは直角
`border-top-left-radius: 12px`	1 つの角だけ
`border-radius: 50% / 25%`	楕円の角: 横の半径 / 縦の半径

背景を持つ子要素が、角丸の親の角からはみ出すことがあります。親に overflow: hidden を指定すると、曲線に沿って切り取られます。

border と outline

outline は border に似て見えますが、border の外側に描かれ、空間を取りません。そのため outline を付けても何も動きません。ブラウザがフォーカスリングに outline を使うのはこのためです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

	border	outline
空間を占める	はい、ボックスのサイズの一部	いいえ
辺ごとの指定	できる (`border-top` など)	できない (全周のみ)
`border-radius` に沿う	はい	はい (現在のブラウザ)
ボックスからのずらし	できない	できる (`outline-offset`)
主な用途	デザイン	フォーカス表示、デバッグ

よくある間違い

線の種類がない。 border: 1px #111827; や border-color: red; では何も描かれません。solid (または別の種類) を含めましょう。
hover で枠線を付けてレイアウトがずれる。 透明な枠線で場所を確保しておくか、outline か box-shadow を使いましょう。
幅の計算で枠線を忘れる。 content-box では、枠線のある width: 100% の要素はコンテナからはみ出します。box-sizing: border-box を使いましょう。
border-radius の角から子要素がはみ出す。 角丸の親に overflow: hidden を追加しましょう。
outline: none でフォーカスのアウトラインを消す。 キーボード利用者には必要です。消すのではなく、outline のスタイルを変えましょう。

よくある質問

CSS で枠線を付けるには？

太さ、種類、色をショートハンドで指定します: border: 2px solid #2563eb;。いちばん大事なのは種類です。種類がないと border の種類は none になり、枠線は描かれません。

CSS の枠線が表示されないのはなぜですか？

ほとんどの場合、線の種類が指定されていないからです。border-style の初期値は none なので、border: 2px #2563eb; や border-color: red; だけでは何も描かれません。solid、dashed などの種類を追加しましょう。

CSS で角を丸くするには？

border-radius を使います: border-radius: 8px; で 4 つの角すべてが丸くなります。正方形の要素に border-radius: 50%; を指定すると円になり、999px のような大きな値ではピル型になります。border がなくても背景の角が丸くなります。

片側だけに枠線を付けるには？

辺ごとのプロパティを使います: border-bottom: 2px solid #e5e7eb;。テキストが始まる側に付けるなら border-inline-start を使います。これは右から左の言語でも正しく動きます。

border と outline の違いは何ですか？

border はボックスの一部で、空間を占め、要素のサイズを変えます。outline は border の外側に空間を取らずに描かれ、辺ごとの指定ができず、ブラウザがフォーカスリングに使うものです。現在のブラウザではどちらも border-radius に沿います。