昔は角丸を使用したい場合、四隅の角の画像を用意して要素の角丸をデザインしていました。
しかし、今ではcssの（border-radius）プロパティを使用することで、簡単に角丸を表示することが可能です。
今回は、そんな（border-radius）の使い方をご紹介します。
border-radiusの使い方
（border-radius）プロパティは、ボックスの４方向の角を全て丸くデザインします。
角丸の半径を指定することで、角丸のデザインも変更できます。別々で指定する方法もありますが、後で記述します。実際の記述を見ていきましょう。
|
1 2 3 |
要素 { border-radius: 30px; } |
この様に、（border-radius）を追加するだけで簡単に要素を角丸にすることができます。今回は、上の様に記述したので、四隅が半径30ピクセルの角丸の要素になります。
わかりやすい様に、背景色を変えるプロパティも追加しました。
|
1 2 3 4 5 6 |
p.test1 { width:50px; height:50px; background-color:skyblue; border-radius: 30px; } |
上記の表示例の記述です。
角丸にすると、要素がはみ出してしまったのでpaddingも追加してみました。
|
1 2 3 4 5 6 7 |
p.test1 { width: 50px; height: 50px; background-color: skyblue; border-radius: 30px; padding: 10px; } |
角丸の四隅を別々に設定する
（border-radius）では、四隅は共通の設定しか出来ませんが、下記のプロパティを使うことで、それぞれの角の設定を行うことができます。
・左上の角 border-top-left-radius: 大きさ;
・右上の角 border-top-right-radius: 大きさ;
・左下の角 border-bottom-left-radius: 大きさ;
・右下の角 border-bottom-right-radius: 大きさ;
また、ショートハンドを利用すれば（border-radius）に４つ値を記述することで四隅の別々の設定も可能です。
