【CSS】両端だけ半円（丸）にする border-radius: 9999px;

Fri, 05 Aug 2022 09:45:17 +0900

両サイドだけ丸いボタンを作りたい

スタイルシートで横長のボンタンを作成するとき、簡単に両サイドだけが丸くしたいときに関電できる方法を見つけたのでメモ

.button {
  width: 100px;
  border-radius: 9999px;
}

widthで幅を指定して、border-radius: 9999px;を加えるだけで、とても簡単です。以下の方法でも可能です。

.button {
  width: 200px;
  border-radius: 200px;
}

他にも、以下のページではborder-radius: 100vh;といったやり方もあるようです。

コツとしては幅よりもborder-radius大きい値を指定すればいいみたいですね。