CSSで罫線を角丸で表示する(1):FirefoxとSafariのCSS

エ・ビスコム・テック・ラボ
2008-01-11 07:00:00
  • このエントリーをはてなブックマークに追加

 前回、前々回でブラウザと標準規格の動向を見てきたが、今回からは、Firefox 3やSafari 3が新しく対応したHTML/XHTMLやCSSを紹介していきたい。

 最初に紹介するのは、Safari 3が新しく対応した、罫線の角を丸く表示するスタイルシートだ。角丸のデザインは、Webページではよく利用されているが、現状では画像を使って表現するしかなく、HTML/XHTMLソースも複雑になるといった問題がある。スタイルシートだけで設定する機能は制作者の多くが待望している機能の1つと言えるだろう。現在のところ、Safari 3とFirefoxが対応しているが、OperaやInternet Explorerは対応していない。

-webkit-border-radiusプロパティ

 Safari 3が新しく対応した-webkit-border-radiusプロパティでは、半径を指定することで罫線の角を丸く表示する。たとえば、

に対して角の半径を「20px」と指定すると、次のように4つの角が丸く表示される。なお、
には太さ5ピクセルの青色の罫線を指定して、背景を水色で表示するように指定している。

Safari 3の表示 Safari 3の表示
div{
-webkit-border-radius: 20px;
border: solid 5px blue;
background-color: skyblue;
padding: 20px;
width: 100px;
}
今日はいい天気です。今日はいい天気です。今日はいい天気です。

※ブラウザで表示を確認する

 上のサンプルでは、paddingプロパティで罫線の内側に20ピクセルの余白を入れているが、余白を入れずに罫線の角を丸くした場合、次のように文字がはみ出して表示される。

Safari 3の表示 Safari 3の表示
div{
-webkit-border-radius: 40px;
border: solid 5px blue;
background-color: skyblue;
padding: 0px;
width: 100px;
}
今日はいい天気です。今日はいい天気です。今日はいい天気です。

※ブラウザで表示を確認する

  • 新着記事
  • 特集
  • ブログ