CSS border-radiusを使ってデザインの幅を広げる小技・テクニック

CSSのborder-radiusは、要素の角丸化を実現するプロパティです。
ボタンや画像、ボックスなど様々な要素に適用でき、デザインの幅を広げることができます。
本記事では、border-radiusの基本的な使い方から、知っておくと便利な小技・テクニックまで、幅広く紹介します。

基本的な使い方

border-radiusは、以下の形式で記述します。

border-radius: 半径;

半径は、角丸の半径をピクセル単位で指定します。

例：ボタンの角丸化

button {
    border-radius: 5px;
  }

左が通常のボタン、右がborder-radius:5px;を適用したボタンです。

複数の半径を指定

border-radiusは、4つの値をカンマ区切りで指定することで、各頂点の角丸半径を個別に設定できます。

border-radius: 上左 上右 下右 下左;

これを使うと、角丸の形状を変えることもできるのです。

button {
    border-radius: 10px 20px 30px 40px;
  }

左がborder-radius:5px;を適用したボタン、右が上記CSSを適用したボタンです。

パーセンテージで指定

border-radiusは、要素の幅や高さの割合で半径を指定することもできます。

border-radius: 50%;

例えば下記のように設定すると、画像を円形に表示することができます。

img {
    border-radius: 50%;
}

左が元の画像、右が上記CSSを適用した画像です。
画像編集ソフトで加工しなくても、CSSだけで角丸を実現することができるのは、使いこなせれば便利になりそうですよね。

小技・テクニック

特定の角にだけborder-radiusを適用する

特定の角にだけ、border-radiusを適用することもできます。
例えば、下記のようなCSSを適用してみましょう。

border-radius: 50px;
border-top-left-radius: 0;
border-bottom-right-radius: 0;

左上と右下の角丸を0に設定しているため、このように表示されます。

右上と左下の角丸を下記のように設定すれば、同じ表示になりますね。

border-top-right-radius: 50px;
border-bottom-left-radius: 50px;

グラデーションと組み合わせる

グラデーションの表示も、border-radiusを適用することができます。

background: linear-gradient(to right, #f00, #00f);
border-radius: 10px;

まとめ

border-radiusは、デザインの幅を広げる可能性を秘めたプロパティです。
今回紹介した小技・テクニックを活用することで、より洗練されたデザインを実現できるでしょう。