項 目 | 説 明 |
---|---|
記述形式 |
|
値 の形式 | 値1,値2,値: 数値 (長さ,%) |
初 期 値 | 0 0 |
対応ブラウザー | C3+ / e9+ / N?+ / Fx4+ / Op10.5+ / Ch4+ / Sa5+ |
適用可能な要素 | すべての要素 (border-collapseプロパティの値に collapse が指定された table要素 を除く) |
継 承 | しない |
border-bottom-left-radiusプロパティ は,要素の 境界ボックスの左下コーナーの半径 を指定します。
上の 1 の 値1 と 値2 の2つを指定する場合は,半角ブランクを挟んで並べます。 この場合,値1 は楕円の横半径であり,値2 は縦半径です。
一方,2 は横半径と縦半径が等しい場合(円の場合)で,このときは 値 の1つのみで指定できます。
値1,値2,値 (横半径,縦半径,半径)の数値による指定は,次のような単位を付けて可能です。
単位 | 説 明 |
---|---|
px | px とは画面の1画素(ピクセル) のサイズを1とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。 |
em | em とは現在使用中の標準フォントの高さを1とする単位です。 |
ex | ex とは現在使用中の標準フォントの小文字の「x」の高さを1とする単位です。 |
% | 横半径 では境界ボックスの 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> |
ブラウザー 表示例 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|