Categories: HTML&CSS

【CSS3】border-radiusの使い方

四角を丸く切り取る方法


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がオススメ!同僚に差をつけよう!

issiki_wp