Cascading Style Sheets border-top-right-radius property.
border-top-right-radiusプロパティは、ボックスの右上の角を丸くする「角丸」にしたい場合に使用する CSS3より追加されたプロパティです。角丸の形状は円または楕円にすることができ、指定する際には水平方向と垂直方向の半径のセットで表します。値のうち一つが 0 であれば、丸めは行われずに角は四角くなります。指定するのは、ボーダーの外側の輪郭です。背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、background-clipプロパティの値で定義されます。
HTML source
<div class="smp1"></div>
CSS source
.smp1 {
width: 100px;
height:100px;
background-color: gray;
border-top-right-radius: 40px;
}
角丸の楕円半径は、<length>（長さ）か <percentage>（パーセンテージ）で指定します。入力する数値には、後ろに必ず「単位」をつける必要があります。単位を付け忘れると設定が反映されないので注意してください。パーセンテージで指定した場合は、要素の幅・高さの指定割合を半径とした角丸になります。
２つの値を記述しますが、１つ目の値は水平方向、２つ目の値は垂直方向の半径となります。２つ目の値が省略された場合には、１つ目と同じ値になります。
HTML source
<div class="smp2"></div>
CSS source
.smp2 {
width: 100px;
height:100px;
background-color: gray;
border-top-right-radius: 60% 20%;
}
尚、border-radiusプロパティを使用すると、ボックスの４つのコーナーの角丸をまとめて指定することができます。
設定した角丸の半径は「境界線の幅も含めた値」と解釈されます。そのため境界線の幅が角丸の半径より大きい場合は、境界線の部分のみが丸くなります。
HTML source
<div class="smp3"></div>
CSS source
.smp3 {
width: 70px;
height:70px;
background-color: gray;
border-top-right-radius: 20px;
border: 30px solid #333;
}
HTML source
<div class="smp4"></div>
CSS source
.smp4 {
width: 70px;
height:70px;
background-color: gray;
border-top-right-radius: 40px;
border: 30px solid #333;
}
円の半径または楕円の長半径及び短半径を示します。絶対的な長さの場合は、CSSの <length> データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。