CSS3: border-radius プロパティ - 境界ボックスのコーナーの半径

■ 概要

項  目説  明
記述形式
  1. セレクタ {border-radius: 値1 / 値2 }, 値1: 横方向, 値2: 縦方向
  2. セレクタ {border-radius: },      : 縦横両方向
値 の形式  値1値2 の内容:
  1. 値を4つ指定: 左上 右上 右下 左下
  2. 値を3つ指定: 左上 右上 右下   (左下右上
  3. 値を2つ指定: 左上 右上   (右下左上左下右上
  4. 値を1つ指定: 左上   (右上右下左下 は同じ値)
 左上右上右下左下: 数値 (長さ,%
初 期 値 0 0 0 0
対応ブラウザー C3+ / e9+ / N?+ / Fx4+ / Op10.5+ / Ch4+ / Sa5+
適用可能な要素 すべての要素
border-collapseプロパティの値に collapse が指定された table要素 を除く)
継  承 しない

■ 解説

border-radius プロパティ は,要素の 境界ボックスの4つのコーナーの半径border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius)を一括指定します。

すなわち,

  1. 左上の値: border-top-left-radius
  2. 右上の値: border-top-right-radius
  3. 右下の値: border-bottom-right-radius
  4. 左下の値: border-bottom-left-radius
を一括指定します。

上の I の 値1値2 の2つを指定する場合は,その間に / (スラッシュ)とその前後の半角ブランクを挟んで並べます。  この場合,値1 は楕円の横半径の指定であり,値2 は縦半径の指定です。

一方,II は4つのコーナーのすべてで横半径と縦半径が等しい場合(円の場合)で,このときは 1つのみで指定できます。

上の 1 ~ 4 に示すとおり,値1値2 の各内容 として,それぞれ, 半角ブランクを挟んで4つまでの値が指定できます。 このとき,

  1. 指定する値の個数にかかわらず,値の順序は,最初から, 左上の値右上の値右下の値左下の値 と決まっています。 (左上から時計回り
  2. 値を3つ指定した場合は,省略された 左下の値右上の値 と同じになります。 
  3. 値を2つ指定した場合は,さらに,省略された 右下の値左上の値 と同じになります。
  4. 値を1つだけしか指定しない場合は,それが 左上,右上,右下,左下 のすべての値になります。

左上左下 (横半径,縦半径,半径)の数値による指定は,次のような単位を付けて可能です。

単位説  明
px
px とは画面の1画素(ピクセル) のサイズを1とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。
em
em とは現在使用中の標準フォントの高さを1とする単位です。 
ex
ex とは現在使用中の標準フォントの小文字の「x」の高さを1とする単位です。
横半径 では境界ボックスの widthプロパティ の値, 縦半径 では heightプロパティ の値を基準にして割合を%値で指定します。

■ 使用例( border-radius プロパティの値の個数と表示)

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>

ブラウザー 表示例
   sample1:
 ←各所,縦,横,すべて別の半径です。
  (値4つを指定)
   sample2:
 ←左下は右上と同じ半径になります。
  (値3つを指定)
   sample3:
 ←左下は右上と,右下は左上と同じ半径になります。
  (値2つを指定)
   sample4:
 ←全部同じ半径になります。
  (値1つを指定)
   sample5:
 ←一番上と各部全部同じ半径になります。
  (各所を個別に指定)

■ 備考

【参考ページ】