【CSS】 要素を「角丸長方形」にしたいのに「楕円」になる

こんにちは、さち です。

今回は、CSS で「要素」の形を「角が丸い長方形」にする方法について書いていきます。

やりたいこと

失敗した方法

HTML・CSS

<button class="btn">Click!</button>

.btn {
  border-radius: 50%;
}

結果

ボタンの角は丸くなりましたが、クソダサパワポみたいな楕円になってしまいました。

border-radius を 50% にすると、要素の「短辺」「長辺」それぞれの長さの「50％」になるので、このような結果になってしまいます。

上手くいった方法

HTML・CSS

<button class="btn">Click!</button>

.btn {
  border-radius: 999px;
}

border-radius の値を「割合」の % でなく、「サイズ」の px などの単位で指定します。数値は適当に大きめの 999px などにしておけばOK。

border-radius の半径は、短辺の半分のサイズに自動で調整されます。

結果

思っていた通りの角が丸い長方形にできました。