CSS3の border-radius でボックスの角に丸みをつけてみる

  • CSS
  • 現在地

今まで対応していないブラウザもある事から見送っていたCSS3ですが、ほとんどのブラウザが少しずつとはいえ利用できるようになってきているので、使用していくことにしました。

今回は、角丸用のプロパティである border-radius を使ってみたのでこれについて記述しておきます。

IE8等の未対応のブラウザで閲覧している場合、border-radius が適用されていないため、下の方のサンプルはただの四角形のはずです。

border-radius / 角に丸みを付ける

border-radius は、ボックス枠の角の丸みを設定できるプロパティで、以下のように指定できます。

.element{border-radius:15px}

この例では、element という class 属性を持つ要素の全ての角の丸みを 15px と指定しているのですが、それぞれの角ごとに違う値を入れたい場合は、左上・右上・右下・左上の順に指定が必要です。

.element{border-radius:15px 30px 25px 40px}

さらに、丸みの開始位置も角ごとに、水平方向・垂直方向の順でスラッシュ(/)で区切って指定することができます。

つまり、値は円の描画を開始する角からの距離となり、円の半径となります。

.element{border-radius:15px 100px 25px 40px / 30px 60px 25px 80px}

サンプル1

上の記述を height:100px;width:100px のボックスに設定してみると右のサンプル1のようになります。

サンプル2

なお、値の単位は em や % でも指定でき、正方形のボックスに 50% 以上で指定することで、サンプル2のような円を書くこともできます。

%以外の単位で正確な円を描く場合は、正方形のボックスの「一辺の長さ+borderの太さ」で指定してください。

注意点

サンプル3

border-radius を指定したボックスの角は丸まり、角部分の領域はボックス外の領域となるのですが、そのボックス内の要素は、角丸の要素に隣接していればはみ出ることがあります。(サンプル3は opera で見るとはみ出ているはずです。)

こういったはみ出る現象を避けるために、隣接させないように余白を付けるか、もしくは内側の要素に border-radius を指定する必要があります。

サンプル4

サンプル4は、サンプル3のボックスの中の要素に border-radius:25px 25px 0 0; を指定して、はみ出ないように調節しているものです。

ちなみに 角丸の要素に overflow:hidden を付けることでも、はみ出てないように見えるのですが、ブラウザごと(特にOpera)に挙動が違ったのでその方法は使わない方がいいみたいです。

スポンサードリンク

inserted by FC2 system