CSS borderの書き方一覧｜線の種類10種と角丸border-radius

CSSのborderとは、要素のまわりに枠線を引くプロパティで、「太さ（border-width）・種類（border-style）・色（border-color）」の3つを組み合わせて指定します。 border: 1px solid #333; の1行で四辺に線が引け、border-radius を足すと角を丸くできます。

この記事では、border-style 全10種の見え方の一覧、一括指定・辺ごとの指定・論理プロパティの書き方、border-radius の値の数と角の対応、円・カプセル・吹き出しなどのコピペ用コードをまとめました。さらに「線を足したら幅がずれた」「角丸から画像がはみ出す」「table の線が二重になる」といったつまずきを、Chromium 141（Playwright 1.56）で再現し、測った数値と一緒に直し方を示します。

borderの早見表

書き方の早見表

border-style 全10種の一覧

検証した環境

borderの基本：太さ・種類・色の3つ

.box {
  border: 1px solid #333;
  /*      太さ 種類  色   （順番は自由） */
}

border は次の3つをまとめた一括指定です。

省略の組み合わせを実際に書いて、適用された値を読み取りました（文字色は rgb(10, 20, 30)）。

3つのうち省略できないのは border-style だけです。 「太さと色を書いたのに線が出ない」ときは、種類（solid など）が抜けていないかを確認します。また、border-style が none や hidden のとき、太さの計算値は0pxになります。

色を省略すると文字色になる性質は、ボタンなどで便利に使えます。

.btn-outline {
  color: #06c;
  border: 1px solid;   /* 色を書かない＝文字色と同じ */
}
.btn-outline:hover { color: #c00; } /* 文字色を変えるだけで線の色も変わる */

線の種類10種を見比べる表示見本コード

次のHTMLを保存して開くと、10種類の線を「太さ・色違い」の3列で見比べられます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
  .grid { display: grid; grid-template-columns: repeat(3, 160px); gap: 16px; font: 14px/1.5 sans-serif; }
  .grid > div { padding: 8px; text-align: center; }
  .w2 { border-width: 2px; border-color: #333; }
  .w6 { border-width: 6px; border-color: #2a6; }
  .w10 { border-width: 10px; border-color: #06c; }
</style>
</head>
<body>
<div class="grid" id="samples"></div>
<script>
  const styles = ['none','hidden','dotted','dashed','solid','double','groove','ridge','inset','outset'];
  const box = document.getElementById('samples');
  for (const s of styles) {
    for (const w of ['w2', 'w6', 'w10']) {
      const d = document.createElement('div');
      d.className = w;
      d.style.borderStyle = s;
      d.textContent = s + ' / ' + w.slice(1) + 'px';
      box.append(d);
    }
  }
</script>
</body>
</html>

幅100pxの箱に border: 6px ◯◯ #2a6 を指定して offsetWidth を測ると、none と hidden は100px（線の幅0px）、ほかの8種はすべて112px（左右6pxずつ）でした。

doubleは3px以上で二重に見える

double の上辺を縦に1画素ずつ読み取った結果です（# が線、. が空白）。

指定した太さを「線・空白・線」に3等分するので、二重線に見せるには3px以上が必要です。

groove・ridge・inset・outsetは色の濃淡で立体に見せる

#2a6（rgb(34, 170, 102)）を指定した6pxの線の色を、画素で確認しました。

暗い色は rgb(17, 86, 51)（指定色の半分の明るさ）でした。黒（#000）を指定した groove でも、Chromium 141 では黒と濃い灰色（rgb(84, 84, 84)）に塗り分けられましたが、差が小さく立体感は弱くなります。立体系の4種は、中間の明るさの色を指定するとはっきり見えます。 濃淡の作り方はブラウザごとに少し異なります。

一括指定と上下左右の個別指定

border 系のプロパティは「辺 × 項目」の組み合わせで名前が決まります。

値を1〜4個書いたときの対応

border-width・border-style・border-color は、margin や padding と同じく値を1〜4個書けます。

3つを同時に使った例で確認しました。

.mix {
  border-width: 1px 2px 3px 4px;
  border-style: solid dashed;
  border-color: red blue green;
}

なお、border 自体には辺ごとの値を書けません（border: 1px 2px solid は無効）。辺ごとに変えたいときは、上の3プロパティか border-top などを使います。

書く順番で結果が変わる

/* 一辺だけ消す：border を先に、消す辺を後に */
.a { border: 2px solid red; border-bottom: none; }

/* 順番が逆だと、後から書いた border が四辺すべてを上書きする */
.b { border-top: 1px solid red; border: 4px dotted blue; }

「全体を先に、例外を後に」書くのが基本です。

論理プロパティ：書字方向に合わせて辺を指定する

border-left は常に「物理的な左」ですが、論理プロパティは文章の向きに合わせて辺が決まります。 右から左へ書く言語や縦書きに対応するページで役立ちます。

同じ指定を3つの書字方向で試しました。

.note {
  border-inline-start: 5px solid red;
  border-block-end: 2px dashed blue;
}

角丸にも論理プロパティがあります（border-start-start-radius など）。Chromium 141 では CSS.supports('border-start-start-radius', '4px') が true でした。日本語の横書きだけのページでは、従来の border-left などで十分です。

border-radiusで角を丸くする

値の数と角の対応

border-radius は値を1〜4個書けます。左上から時計回りに当たります。

   左上 ────── 右上
    │            │
    │            │
   左下 ────── 右下

   4値の順番： 左上 → 右上 → 右下 → 左下

適用された各角の値を読み取った結果です。

角ごとに指定する個別プロパティもあります。

スラッシュ指定：横と縦の半径を分ける

スラッシュの前が横方向の半径、後ろが縦方向の半径です。別々にすると、角が楕円の弧になります。

.ellipse-corner { border-radius: 50px / 20px; }
/*                              横50px / 縦20px を四隅すべてに */

.mixed { border-radius: 10px 20px 30px 40px / 5px 10px; }
/*                      横：左上10 右上20 右下30 左下40 / 縦：左上と右下5、右上と左下10 */

スラッシュの前後それぞれに、1〜4値の決まりが別々に当たります。

％とpxの違い：50%と9999px

200×100pxの長方形で、角丸の値だけを変えて形を確かめました。上辺のうち、まっすぐな部分がどこからどこまで残るかを画素で測っています。

％は横の半径が幅に対して、縦の半径が高さに対して計算されます。 そのため長方形に 50% を指定すると楕円になります。一方、px で大きすぎる値を指定すると、隣り合う角の半径の合計が辺の長さに収まるよう、ブラウザが同じ比率で縮めます。結果として「短い辺の半分」が半径になり、カプセル形になります。300px と 9999px が同じ形になったのはこのためです。

コピペで使える角丸コード集

サイズは Chromium 141 で測った値です。

円（アイコン・アバター）

.circle {
  width: 120px;
  aspect-ratio: 1;       /* 正方形にする */
  border-radius: 50%;
  background: #06c;
}
img.avatar {
  width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;     /* 縦横比の違う写真も中央で切り抜く */
}

.circle は120×120pxの正円になりました。

カプセル形（タグ・ボタン）

.pill {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 9999px;
  background: #06c;
  color: #fff;
}

「タグ」の2文字を入れると72×37pxで、文字数が増えても左右は半円のまま保たれます。

片側だけ角丸（タブ・カードの上部）

.tab       { border-radius: 12px 12px 0 0; }   /* 上の2つだけ */
.left-only { border-radius: 12px 0 0 12px; }   /* 左の2つだけ */
.leaf      { border-radius: 0 50% 0 50%; }     /* 右上と左下だけ（葉の形） */

.tab の計算値は 12px 12px 0px 0px、.leaf は 0px 50%（2値の形に短縮）でした。

吹き出し

<p class="bubble">こんにちは</p>

.bubble {
  position: relative;
  display: inline-block;
  padding: 12px 16px;
  border-radius: 12px;
  background: #e8f1ff;
  color: #123;
}
.bubble::after {
  content: "";
  position: absolute;
  top: 100%;                     /* 本体のすぐ下 */
  left: 24px;
  border: 10px solid transparent; /* 四辺とも透明な10pxの線 */
  border-top-color: #e8f1ff;      /* 上の辺だけ色を付ける＝下向きの三角形 */
}

吹き出し本体は112×45pxで、その真下に高さ10pxの三角形が同じ色で描かれることを画素で確認しました。幅も高さも0の要素に太い border を付けると、4つの辺は三角形になります。 1辺だけ色を付け、残りを透明にすると、その方向を指す三角形になります。

見出しの飾り線

.h-left   { padding-left: 12px; border-left: 6px solid #06c; }
.h-under  { padding-bottom: 6px; border-bottom: 2px solid #06c; }
.h-double { padding-block: 8px; border-block: 3px double #333; }  /* 上下に二重線 */

リストの区切り線（最後の線を出さない）

<ul class="list">
  <li>備品A</li>
  <li>備品B</li>
  <li>備品C</li>
</ul>

.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 8px 0; }
.list > li + li { border-top: 1px solid #ddd; }  /* 2つ目以降の上にだけ線 */

各 li の上辺の太さを読み取ると 0px, 1px, 1px でした。「隣り合う要素の間だけ」に線が入るので、先頭や末尾に余分な線が残りません。 border-bottom を全部に引いてから最後だけ消す書き方より短くなります。

グラデーションの枠線を角丸にする

枠線をグラデーションにする方法は2つあり、角丸と両立できるかどうかが違います。200×100pxの箱に4pxの線と border-radius: 16px を指定し、左上の角の画素を調べました。

/* 方法A：border-image（角丸にはならない） */
.a {
  border: 4px solid;
  border-image: linear-gradient(90deg, #f00, #00f) 1;
  border-radius: 16px;
}

/* 方法B：背景を2枚重ねる（角丸になる） */
.b {
  border: 4px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#fff, #fff) padding-box,              /* 内側を白で塗る */
    linear-gradient(90deg, #f00, #00f) border-box;        /* 枠線の下までグラデーション */
}

方法Bは、透明な枠線の下に広がる背景（border-box）を線として見せ、内側（padding-box）を単色で塗りつぶす仕組みです。内側を透過させたい場合には使えない点だけ気を付けます。

つまずきやすい点を再現して直す

線を足すと幅がずれる（box-sizing）

<div style="width: 200px; padding: 10px; border: 5px solid">content-box</div>
<div style="width: 200px; padding: 10px; border: 5px solid; box-sizing: border-box">border-box</div>

初期値の content-box では、width は中身の幅だけを指します。線や padding を足すとその分だけ外側に大きくなり、横並びが崩れたり、親からはみ出したりします。全要素を border-box にしておくと、width に書いた値がそのまま見た目の幅になります。

*, *::before, *::after { box-sizing: border-box; }

ホバーで線を太くすると周りが動く

/* 直す前：1px → 3px で高さが変わる */
.item       { border: 1px solid #ccc; }
.item:hover { border: 3px solid #06c; }

直し方は3つあります。

/* 方法1：最初から同じ太さの透明な線を引いておく */
.item       { border: 3px solid transparent; }
.item:hover { border-color: #06c; }

/* 方法2：outline を使う（大きさに影響しない） */
.item:hover { outline: 2px solid #06c; outline-offset: -1px; }

/* 方法3：内側の影で線を描く */
.item:hover { box-shadow: inset 0 0 0 2px #06c; }

borderとoutlineの違い

幅200px・高さ30pxの要素に outline: 5px solid red; outline-offset: 3px; を指定しても、offsetWidth は200、offsetHeight は30のままで、次の要素との間隔も0pxのままでした。

outline はキーボード操作でフォーカスの位置を示す役割を持っています。outline: none で消す場合は、:focus-visible で代わりの見た目を用意します。

button:focus-visible { outline: 2px solid #06c; outline-offset: 2px; }

角丸から画像がはみ出す

親に border-radius を付けただけでは、中の画像は四角いまま角からはみ出します。200×200pxの親（border-radius: 40px）に同じ大きさの赤い画像を入れ、左上の角の画素を調べました。

border-radius は「その要素の背景と枠線」を丸めるもので、子要素は切り抜きません。親に overflow: hidden（または clip）を足すのが基本の直し方です。

.card { border-radius: 12px; overflow: hidden; }
.card img { display: block; width: 100%; }

カードの上側にだけ画像がある場合は、画像に border-radius: 12px 12px 0 0; と書く方法もあります。親に枠線があるときは、内側の角は「角丸の値 − 線の太さ」になる点も覚えておくと、すき間のない仕上がりになります。

tableの線が二重になる

table と td の両方に border: 1px solid を指定し、幅50pxのセルを2つ並べて測りました。

table  { border-collapse: collapse; }
th, td { border: 1px solid #333; padding: 8px; }

collapse にすると、隣り合うセルの線が1本にまとめられます。このとき線どうしが競合するので、冒頭の表で触れた優先度が働きます。hidden は最優先で線を消し、none は最も優先度が低く、隣のセルの線があればそちらが表示されます。

/* 表の外枠だけ消したいとき */
table { border-collapse: collapse; border-style: hidden; }

また、collapse にした table では、td の border-radius は働きません。表の角を丸めたいときは、border-collapse: separate; border-spacing: 0; にしたうえで四隅のセルに角丸を付けるか、表を包む div に border-radius と overflow: hidden を指定します。

そのほかのチェックリスト

角の形を変える corner-shape（参考）

角の形そのものを変える corner-shape プロパティ（squircle、bevel、scoop など）は、Chromium 141 で CSS.supports('corner-shape', 'squircle') が true を返しました。ほかのブラウザでの対応は未実行のため、現時点では対応していない環境で通常の角丸に戻る「追加の飾り」として使うのがよさそうです。

.squircle {
  border-radius: 24px;
  corner-shape: squircle;  /* 対応していないブラウザでは 24px の通常の角丸になる */
}

よくある質問

Q. border と outline はどちらを使えばよいですか？ A. デザインとして常に表示する枠線や区切り線は border、フォーカスの表示やホバー時の強調のように「周りを動かさずに一時的に線を出したい」ときは outline が向いています。outline は要素の大きさに含まれないので、表示・非表示を切り替えてもレイアウトが変わりません。

Q. border-radius: 50% と 9999px の違いは何ですか？ A. 50% は幅と高さそれぞれの半分を半径にするので、正方形なら正円、長方形なら楕円になります。9999px は大きすぎる値が自動で縮められて「短い辺の半分」が半径になるため、長方形ではカプセル形になります。

Q. 線の内側だけ・下線だけに色を変えられますか？ A. 辺ごとの色は border-bottom-color などで変えられます。1辺の中で色を変えたい場合は、border-image にグラデーションを指定するか、背景や疑似要素で線を描く方法を使います。なお border-image を使うと border-radius は線に反映されません。

Q. 点線の間隔は変えられますか？ A. dotted や dashed の間隔は CSS では指定できず、ブラウザが決めます。間隔まで決めたいときは、repeating-linear-gradient を背景として細く敷く方法が使えます。

まとめ

• border は「太さ・種類・色」の3つ。省略できないのは種類（border-style）で、抜けると線が出ない
• 線の種類は10種。none と hidden は幅を取らず、double は3px以上で二重に見える
• 値を1〜4個書いたときは「上・右・下・左」の時計回り。全体を先に、例外の辺を後に書く
• border-radius は左上から時計回り。スラッシュの前が横、後ろが縦の半径
• 正方形に 50% で円、9999px でカプセル形。吹き出しの三角形は透明な border で作る
• 線で幅がずれるなら box-sizing: border-box、ホバーで動くなら outline か透明な線
• 角丸から画像がはみ出すなら親に overflow: hidden、table の二重線は border-collapse: collapse

株式会社RJCでは、CSSの枠線や角丸の指定方法を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。