CSSで画像や要素を角丸で表示する方法

昔は角丸を使用したい場合、四隅の角の画像を用意して要素の角丸をデザインしていました。

しかし、今ではcssの(border-radius)プロパティを使用することで、簡単に角丸を表示することが可能です。

今回は、そんな(border-radius)の使い方をご紹介します。

border-radiusの使い方

(border-radius)プロパティは、ボックスの4方向の角を全て丸くデザインします。

角丸の半径を指定することで、角丸のデザインも変更できます。別々で指定する方法もありますが、後で記述します。実際の記述を見ていきましょう。

要素 {
    border-radius: 30px;
}

この様に、(border-radius)を追加するだけで簡単に要素を角丸にすることができます。今回は、上の様に記述したので、四隅が半径30ピクセルの角丸の要素になります。

スクリーンショット 2016-03-02 12.24.33

わかりやすい様に、背景色を変えるプロパティも追加しました。

p.test1 {
      width:50px; 
      height:50px; 
      background-color:skyblue; 
      border-radius: 30px;
}

上記の表示例の記述です。

角丸にすると、要素がはみ出してしまったのでpaddingも追加してみました。

p.test1 {
                  width: 50px;
                  height: 50px;
                  background-color: skyblue;
                  border-radius: 30px; 
                  padding: 10px;
}

スクリーンショット 2016-03-02 12.31.04

角丸の四隅を別々に設定する

(border-radius)では、四隅は共通の設定しか出来ませんが、下記のプロパティを使うことで、それぞれの角の設定を行うことができます。

・左上の角 border-top-left-radius: 大きさ;
・右上の角 border-top-right-radius: 大きさ;
・左下の角 border-bottom-left-radius: 大きさ;
・右下の角 border-bottom-right-radius: 大きさ;

また、ショートハンドを利用すれば(border-radius)に4つ値を記述することで四隅の別々の設定も可能です。