Web制作

【CSS】border-radiusを使って長方形の両端を丸くする方法

この記事では、

「長方形の両端を丸にしたいんだけど、どうすればいいの、、、」

こんな疑問にお答えしていきます。

普通にborder-radiusを効かせると楕円になってしまいますので、少しだけ工夫が必要です。

リファレンスを参考に作成しました。

では、記事に入っていきます(/・ω・)/

border-radiusを使って長方形の両端を丸くする方法

元のコードは以下の通り。

See the Pen MZgwLR by naka (@nakawork) on CodePen.

上記の長方形にborder-radiusを効かせて両端を丸くしていきます。

具体的には以下のコードを使えばいけますね。

See the Pen BvBoLO by naka (@nakawork) on CodePen.

border-radiusは水平方向と垂直方向の指定が出来ます。

とりあえず、垂直方向に50%を指定すれば長方形の両端の辺の真ん中から円を描くことが可能です。

水平方向の指定は各々好きなように変えていただければなと。

僕が書いたコードでは10%になっています。

数字を大きくすれば、円が大きくなりますし小さくすれば円が小さくなりますね。

詳しい話に関しては、こちらのリファレンスを参考にすると良いです。

border-radiusは少しややこしいけど、慣れれば使えるようになってきます。

では、終わり。

RELATED POST