【CSS3】border-radiusの使い方

2020年8月26日

四角を丸く切り取る方法

STEP.1

丸く切り取りたい要素を用意する

要素を用意します。

See the Pen
shikaku-pre by shiakisudev (@shiakisu)
on CodePen.

STEP.2

border-radiusで丸く切り取る

border-radiusで丸く切り取ります。

See the Pen
maruku by shiakisudev (@shiakisu)
on CodePen.

CSS

.ele{
  height:100px;
  width:100px;
  background-color:pink;
  border-radius:50%;
}