border-radius:50%なら丸になる？長方形と正方形で角丸を比べよう

画像やボタンを丸くしたくてborder-radiusを50%にしたのに、横長の形になった。CSSの角丸は、元になる箱の幅と高さも関係するよ。

このページでは、pxと%の角丸を作例で見比べる。準備はブラウザだけ。実際の画像や個人情報を使わず、色の付いた練習用の箱で確かめよう。

箱の角を丸くする指定

border-radiusは、箱の角の丸みを指定するCSSのプロパティ。pxは長さの単位の一つで、%は箱の幅や高さを基準にした割合として扱われる。

単純な一つの値の例では、50%は横方向で幅の半分、縦方向で高さの半分に当たる丸みになる。幅と高さが同じなら円、違うなら楕円のような形になるよ。

.circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
}

この例で丸になるのは、50%だけでなく、正方形の箱を用意しているため。画像の内容が自動で中央へ切り抜かれる指定とは別だよ。

動かしてみよう

記事下の作例は、最初に横長の箱と50%の角丸を表示する。箱の形を正方形へ変え、続けて24pxや0pxを選んでみよう。

リセットで長方形・50%へ戻る。画面が狭い場合は箱が収まる幅に制限しているので、表示寸法は端末の幅も影響するよ。

見た目の形と押せる範囲

角が丸く見えることと、クリック・タップを受け付ける範囲が同じ形になることは、別の確認。丸い絵を小さく置いただけで、使いやすい操作になるとは限らない。

写真に使う場合も、人物の顔や大切な文字が隠れないかを確認しよう。角丸の見た目を決めることと、元画像の構図を決めることは分けて考えたいね。

画像を枠に収める方法はobject-fitのcoverとcontain、操作の面積は押せる範囲の確認へ。

参照した公式資料

• MDN：border-radius

確認日：2026年10月24日。