すべてのカテゴリ

Webサイトを作っていると、ボタンやカード、画像などでよく使うのがborder-radiusです。角を少し丸くするだけでも、デザイン全体の印象はかなり変わります。今回は、角丸の大きさによってどんな印象になるのかをまとめます。border-radiusとは？border-radiusは、要素の角を丸くするCSSです。例えば、.card {  border-radius: 12px;}とすると、カードの四隅が少し丸くなります。数値を大きくするほど、丸みも強くなります。角丸が小さい場合例えば、border-radius: 4px;のように小さめにすると、きちんとした印象シャープな印象落ち着いた印象ビジネス向けになりやすいです。企業サイトや、少しかっちりしたデザインにも合わせやすいです。8px〜16pxくらいは使いやすいWeb制作では、border-radius: 8px;border-radius: 12px;border-radius: 16px;くらいは、とても使いやすいサイズです。このくらいなら、柔らかさは出るけれど、丸すぎないというバランスになります。カードや画像、入力フォームなどにも使いやすいです。角丸を大きくすると柔らかい印象に例えば、border-radius: 24px;border-radius: 30px;など、大きめにすると、親しみやすいかわいい柔らかいカジュアルな印象になります。美容系、カフェ、子ども向け、女性向けなどのデザインとも相性が良いです。50%にすると円になる正方形の要素に、border-radius: 50%;を指定すると、丸い形になります。プロフ