【CSS3】border-radiusの使い方

2020年8月26日2023年1月22日

目次へ

四角を丸く切り取る方法

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%;
}

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！