Web・PC Tips

円や楕円、自由に角丸を作ってしまう-CSS

ちょっとあると便利な小技。
cssで角を丸くするってのはよくあります。
ひとつづつ画像を作っていた時代もあったのに。

角丸だけならとっても簡単。
画像にも使えます。 半径10pxの角丸ならこれだけ。

border-radius:10px;
四隅の半径はすべて10px。

例えば、正方形のブロックに半径50%を指定すると円です。

border-radius:50%;

四隅をそれぞれ指定する場合は、左上を起点に時計回りです。

border-radius:10px 20px 30px 40px;
左上の半径10px、右上は20px、右下は30px、左下が40px;

ここまでが円の指定です。
次は、楕円。
円に比べると、ちょっと複雑。

楕円の場合、半径は縦と横がありますよね。
書き方は、円の時と同じですが、縦と横の半径を /(スラッシュ)で区切ります。
/(スラッシュ)の左が横半径。
/(スラッシュ)の右が縦半径。
左上を起点に、横半径を時計回りに指定。
スラッシュで区切ったら、同じく縦半径を時計回りに指定です。

一括指定する時はこう。

border-radius:20px / 50px;
四隅はすべて、横半径が20px、縦の半径が50pxの楕円です。

楕円の書き方を使っていびつな円が作れます。

border-radius:50% 50% 60% 70% / 70% 30% 80% 50%;
ひとつづつ指定しつつ、適当にずらしてみたりして。

いびつな円

角丸をつくるのに便利なborder-radius:を使って、ちょっと遊べます。