【HTML・CSS】border-radiusで画像やboxを丸くしよう!

HTML,CSS

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

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

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

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

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

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

タイトルとURLをコピーしました