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

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

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

Link

Border-Radius:9999px;で角丸に柔軟性をもたせる上級cssテクニック | Eclairのブログ

https://eclair.blog/css-border-radius/

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

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

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

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

Link

【css】border-Radiusで円・角丸を作る！部分的に指定する方法も | Jajaaan

https://jajaaan.co.jp/web-production/frontend/border-radius/

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

PAGETOP