CSS

Cascading Style Sheets border-radius property.

border-radius 「角丸をまとめて指定する」

　border-radius プロパティは、ボックスの４つのコーナーの角丸をまとめて指定する際に使用します。 それぞれの角丸コーナーは４分の１楕円になりますが、楕円の形状は、下図のように水平方向と垂直方向の２つの半径の組み合わせで決定されます。

　border-radius プロパティで角丸を指定する際には、それぞれのコーナーの楕円の形状を水平方向と垂直方向の半径のセットで表します。 指定するのは、ボーダーの外側の輪郭です。

　水平方向と垂直方向の半径のセットは、スラッシュ（ / ）で区切ります。 スラッシュの前後に水平方向と垂直方向の半径の値を、左上・右上・右下・左下の順で指定します。

　スラッシュ以降を省略した場合には、水平垂直ともに同じ値として解釈されます。 また、それぞれのコーナーの値は省略することができますが、その場合には以下のルールに基づいて解釈されます。

• 左下が省略された場合には、右上と同じ。
• 右下が省略された場合には、左上と同じ。
• 右上が省略された場合には、左上と同じ。

　楕円半径の値は、長さかパーセンテージで指定します。長さで指定する場合には、px・em・ptなどの単位を使用できます。 また、パーセンテージで指定する場合には、ボーダーボックスの幅と高さに対する楕円半径のパーセンテージを指定します。 指定する値が0の場合、コーナーの形状は四角になります。

　尚、border-top-left-radius（左上）・ border-top-right-radius（右上）・ border-bottom-left-radius（左下）・ border-bottom-right-radius（右下）を使用すると、それぞれのコーナーの角丸を個別に指定することができます。

border-radiusで円を作る「正円・楕円・角丸ボタン」

　border-radiusを使って円を作ることが出来ます。円はちょっとした装飾などでよく使います。

正円

　正円にするには 縦幅の height と横幅の width を同じ値にして border-radius:50%; を指定します。

　ちなみに 50%以上の数値の場合、同じ結果となります。

<div class="circle"></div>

.circle {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: steelblue;
}

　上記の例では background-color を指定していますが、画像を指定すると正円で切り抜かれた画像になります。SNSのプロフィールアイコンのような感じが作れます。

<div class="circle4"></div>

.circle4 {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-image: url(programming_woman.jpg);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
}

<div class="circle5"></div>

.circle5 {
	width: 200px;
	height: 200px;
	background-image: url(programming_woman.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

楕円

　楕円は、上記の正円の横幅 width を違うサイズの 200px にしただけです。

<div class="circle2"></div>

.circle2 {
	width: 200px;
	height: 50px;
	border-radius: 50%;
	background: steelblue;
}

角丸ボタン風

　両端を円にするには border-radius を px などの絶対指定にします。

　上記の楕円の 縦幅 height:50px; の半分の 25px を border-radius で指定しています。数値はいくら大きくてもいいので、とりあえず 1000px 等と指定しても問題ありません。

<div class="circle3"></div>

.circle3 {
	width: 200px;
	height: 50px;
	border-radius: 25px;
	background: steelblue;
}

　半径の値はいくら大きくてもいいと書きましたが、Firefoxでは 17895697px を超えるとエラーになることもなく角丸にならないようです。
　（参考：Firefoxだけborder-radiusがなぜか効かないcssコード）
　この事からも、極端すぎる数値は使わない方がいいかもしれません。また、複数のブラウザでの表示確認も大事なようです。