画像が四角だけじゃなくて、マルにしたい！という時に使うborder-radiusの紹介です。

See the Pen Untitled by kotetsu (@zupshihe-the-encoder) on CodePen.

aのように高さと幅を一緒にして、border-radiusを50％にすると丸ができます。プロフィール画像などに使えそうですね。また、ｃのように、高さと幅と同じpxでborder-radiusを入力すると同じように丸になります。

bのように、pxを低くすると、見出しやセクションを囲むのによさそうな形になります。

私は、文字の背景をbackground-colorで色を付けた後にborder-radius: 10px～20px;ぐらいで丸みをつけて柔らかい感じにすることにはまっています。

サイトのイメージに合わせて使ってみたいと思います。

Webサイト、LP制作やお仕事の依頼、ご相談など
お気軽にお問い合わせください。