枠線と角丸は、見た目を整えるときに最初に使う指定です。書き方は単純ですが、レイアウト崩れの原因にもなりやすいので、仕組みまで押さえておきましょう。

border は3つの値を空白で並べる

枠線の基本形
.card {
  /* 太さ / 種類 / 色 の順に並べる */
  border: 1px solid #cbd5e1;
}
  • 太さ … 1px、2px など
  • 種類 … solid（実線）、dashed（破線）、dotted（点線）
  • 色 … 省略すると文字色と同じになる

順番はどれが先でも動きますが、太さ・種類・色の順で書くのが一般的です。この形で覚えてしまってください。

一辺だけに引く

上下左右のうち、特定の一辺だけに線を引くこともできます。見出しの下線や、引用の左の縦線でよく使います。

CODE一辺だけの枠線コードを書き換えると、すぐ下で動きます

border-left を border-bottom に書き換えると、線の位置が変わります。太さも変えてみてください。

角丸は数字ひとつ

border-radius に数字を書くだけです。大きくするほど丸くなり、高さの半分を超えると完全な円や、カプセル型になります。

CODE角丸の数字を変えるコードを書き換えると、すぐ下で動きます

border-radius の値を 0、8px、999px と変えてみてください。999px にするとカプセル型になります。

4つの角を別々に指定したいときは、値を4つ並べます。順番は左上から時計回りです。

枠線を足すとレイアウトがずれる理由

border は要素の大きさに加算されます。width: 200px の箱に 2px の枠線を付けると、実際の幅は204pxになります。横並びにしているときは、これで折り返しが起きることがあります。

対策はいつもの1行です。box-sizing: border-box を指定しておくと、枠線や余白を含めた大きさで計算されるようになります。

style.css の先頭に書いておく
*, *::before, *::after {
  box-sizing: border-box;
}

ホバーで枠線の色を変えるときのコツ

「ふだんは枠線なし、ホバーしたら枠線を出す」と書くと、その瞬間に要素が大きくなってガタつきます。最初から透明な枠線を置いておき、色だけを変えるとガタつきません。

CODEガタつかせない書き方コードを書き換えると、すぐ下で動きます

マウスを乗せてみてください。透明な枠線を最初から確保しているので、大きさは変わりません。

outline という別の線もある

outline は border とよく似ていますが、要素の大きさに影響しません。そのため、デバッグで全要素に線を引くときや、キーボード操作時のフォーカス表示に使われます。フォーカスの outline は消さないでください。消すと、キーボードだけで操作している人が現在位置を見失います。