CSS3のborder-radiusを使ってみる


Written on 2009/05/23 – 1:14 PM | by mike

CSS3のborder-radiusを使ってみる

CSS3を使えば画像を使わずに角丸を表現する事が出来ます。
早速使ってみました。

すべての角に角丸を適用した場合

css3corner

CSSソース

#css3_corner{
  font-family: Arial;
  border: 5px solid #dedede;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  padding: 15px 25px;
  height: inherit;
  width: 350px;
}

一部にだけ適用させてこんな角丸も可能。

css3corner2

CSSソース

#css3_corner2{
  font-family: Arial;
  border: 5px solid #dedede;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 15px;
  -moz-border-radius-bottomleft: 15px;
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-bottom-right-radius: 15px;
  padding: 15px 25px;
  height: inherit;
  width: 350px;
}

-moz-*はFirefox用のプロパティ。
-webkit-*はSafari用のプロパティ。

ただし、対応しているブラウザは以下のブラウザです。

  • FireFox (3.0.5)
  • Google Chrome (1.0.154.36)
  • Safari (3.2.1, Windows)

以下のブラウザは非対応です。（2009/06/07訂正）

  • Internet Explorer (IE6, IE7, IE8…)
  • Opera (9.6)

これを使えば角丸の画像を用意する手間が省けていいですね。
早く全ブラウザが対応してくれるといいな。

＜ 2009/06/07 追記＞
IEやOperaでは、現状border-radiusは使えないのですが、JavaScriptライブラリを利用すると、IEやOperaでも角丸を表現する事が出来ます。

このあたりは、また紹介したいとおもいます。

Tags: ,

  1. 4 Responses to “CSS3のborder-radiusを使ってみる”

  2. By 佳馨 on 6月 6, 2009 | Reply

    初めまして。
    border-radiusの使い方を分かりやすく纏めてらっしゃるよい記事ですね。

    ところで、対応ブラウザに、
    Internet Explorer (IE6, IE7, IE8…)
    とありますが、非対応のと混同されてませんか？

    何か拡張を入れたらIEでも出来るということでしたらそこの点を教えてくださると助かります。

  3. By ミケ on 6月 7, 2009 | Reply

    初めまして。
    ご指摘ありがとうございます。
    うっかりしてました＾＾；

    このブログでもまた紹介しようと思いますが、IEとOperaでの角丸実装方法について、リンクも追記しておきましたので参考になればと思います。

  4. By 佳馨 on 6月 10, 2009 | Reply

    追記ありがとうございます。

  1. 1 Trackback(s)

  2. 2月 9, 2010: 角丸新時代 | Choco Bis Days

Post a Comment