広告あり

【コーディング備忘録】border-radiusを使って色々な丸をつくる!〜CSS〜

WEBデザイン

CSSで四角いオブジェクトを作ることはあったけど、円はどうやって作るんだろう?とふと疑問に思い調べてみました。

今後も使うことになると思うので備忘録として書き残しておこうと思います!

正円の作り方

角丸の作り方

border-radiusの数値をあげると、角がより丸くなります!

かまぼこ型の作り方

border-radiusの値を角の左上→右上→右下→左下と時計回りに指定することで、かまぼこも作れます!

さいごに

いかがでしたでしょうか?

とても単純なCSSですが、まだ自分の記憶だけでササっと記述できる自信がありません!何度も見返して覚えていきたいと思います。

良かったらご活用くださいませ〜。

コメント