| 項 目 | 説 明 |
|---|---|
| 記述形式 |
|
| 値 の形式 | 値1，値2，値： 数値 （長さ，%） |
| 初 期 値 | 0 0 |
| 対応ブラウザー | C3+ / e9+ / N?+ / Fx4+ / Op10.5+ / Ch4+ / Sa5+ |
| 適用可能な要素 | すべての要素 （border-collapseプロパティの値に collapse が指定された table要素 を除く） |
| 継 承 | しない |
border-bottom-right-radiusプロパティ は，要素の 境界ボックスの右下コーナーの半径 を指定します。
上の 1 の 値1 と 値2 の２つを指定する場合は，半角ブランクを挟んで並べます。 この場合，値1 は楕円の横半径であり，値2 は縦半径です。
一方，2 は横半径と縦半径が等しい場合（円の場合）で，このときは 値 の１つのみで指定できます。
値1，値2，値 （横半径，縦半径，半径）の数値による指定は，次のような単位を付けて可能です。
| 単位 | 説 明 |
|---|---|
| px | px とは画面の１画素（ピクセル） のサイズを１とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。 |
| em | em とは現在使用中の標準フォントの高さを１とする単位です。 |
| ex | ex とは現在使用中の標準フォントの小文字の｢x｣の高さを１とする単位です。 |
| ％ | 横半径 では境界ボックスの widthプロパティ の値，
縦半径 では heightプロパティ の値を基準にして割合を％値で指定します。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- div.sample1 {width: 200px; height: 60px; background-color: #dddddd; border: solid green 8px; border-radius: 50px 30px 20px 10px / 60px 40px 25px 15px; } div.sample2 {width: 200px; height: 60px; background-color: #dddddd; border: solid green 8px; border-radius: 50px 30px 20px / 60px 40px 25px; } div.sample3 {width: 200px; height: 60px; background-color: #dddddd; border: solid green 8px; border-radius: 50px 30px / 60px 40px; } div.sample4 {width: 200px; height: 60px; background-color: #dddddd; border: solid green 8px; border-radius: 50px / 60px; } div.sample5 {width: 200px; height: 60px; background-color: #dddddd; border: solid green 8px; border-top-left-radius: 50px 60px; border-top-right-radius: 30px 40px; border-bottom-right-radius: 20px 25px; border-bottom-left-radius: 10px 15px; } --> </style> |
| HTML <body> ～ </body> |
<div class="sample1"> sample1：</div> <br> <div class="sample2"> sample2：</div> <br> <div class="sample3"> sample3：</div> <br> <div class="sample4"> sample4：</div> <br> <div class="sample5"> sample5：</div> |
| ブラウザー 表示例 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|