項 目 | 説 明 |
---|---|
記述形式 |
|
値 の形式 | 値1,値2,値 の内容:
|
初 期 値 | 0 0 0 0 |
対応ブラウザー | C3+ / e9+ / N?+ / Fx4+ / Op10.5+ / Ch4+ / Sa5+ |
適用可能な要素 | すべての要素 (border-collapseプロパティの値に collapse が指定された table要素 を除く) |
継 承 | しない |
border-radius プロパティ は,要素の 境界ボックスの4つのコーナーの半径 (border-top-left-radius,border-top-right-radius, border-bottom-right-radius,border-bottom-left-radius)を一括指定します。
すなわち,
上の I の 値1 と 値2 の2つを指定する場合は,その間に / (スラッシュ)とその前後の半角ブランクを挟んで並べます。 この場合,値1 は楕円の横半径の指定であり,値2 は縦半径の指定です。
一方,II は4つのコーナーのすべてで横半径と縦半径が等しい場合(円の場合)で,このときは 値 1つのみで指定できます。
上の 1 ~ 4 に示すとおり,値1,値2,値 の各内容 として,それぞれ, 半角ブランクを挟んで4つまでの値が指定できます。 このとき,
左上 ~ 左下 (横半径,縦半径,半径)の数値による指定は,次のような単位を付けて可能です。
単位 | 説 明 |
---|---|
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> |
ブラウザー 表示例 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|