border-radiusの記述例

4つの角に値を指定する方法

角が70pxの角丸のボックスを作る場合は、

.box {
	border-radius: 70px 70px 70px 70px;
}

となります。ちなみに、角丸の丸さは半径●pxの円を角に配置した時の弧と同じカーブになります。
1453-01

各数値は、時計回りで左上・右上・右下・左下の順に適用されます。marginやpaddingに似てますよね。
1453-02

また、4つの角が全て同じ値の場合は省略することも可能です。例えば、上記の場合は4つの角が全て70pxなので、

.box {
	border-radius: 70px;
}

と記述しても同じ角丸ボックスが生成されます。これもmarginやpaddingと同じ容量です。記述は最低1つ~最高で4つまでで、

  • 1つの場合…全ての角に適用
  • 2つの場合…左上と右下、右上と左下 (対角線ですね)
  • 3つの場合…左上、右上と左下、右下
  • 4つの場合…左上から時計回り

となります。

ちなみに、値はpxでなく%でも指定ができます。%の場合は、ボックスの幅や高さの割合に応じて弧を描写してくれます。例えば幅300px高さ300pxの正方形に25%の指定をした場合は、半径75pxの円の弧の角丸になります。
1453-03

50%の場合は、半径150pxの円の弧の角丸になります。
1453-04

半径150px=直径300pxの円=ボックスと同じサイズですよね、なので、見て分かるとおり、50%の指定の場合は正円の形になります。

水平方向と垂直方向に別々の値を指定する方法

これはあまり個人的には実用性がないと思うのですが、上記の設定方法以外に、「水平方向」「垂直方向」を個別に指定することも出来ます。例えば、一番最初に「角丸70px」のボックスの記述例を書きましたが、これを「水平方向は70px、垂直方向は20px」の角丸にしたい場合。そんな時は、

.box {
	border-radius: 70px/20px;
}

とします。スラッシュが入ることで、水平/垂直の指定を行うことが出来ます。4つの角の水平方向・垂直方向の値を個別に指定したい場合は、

.box {
	border-radius: 70px 60px 50px 40px/20px 10px 10px 20px;
}

などのように、それぞれの値を1つづつ記述します。これについては少し複雑なため、はじめての方は混乱すると思うので今回の解説では割愛します。まずは、簡単な指定方法から覚えるといいですよv