css 角丸

css3 と http5 で使用できるようになる角丸の表現。
いくつかのブラウザではサポートされている。

テーマ FotoFolio の css にも Firefox用 のcssがあったが、下記のように他のブラウザでも表示できるように2行を追加した。
これで Google Chrome 、Safari はOKである(IE 8、Opera は×)。
使っている箇所はコメント記入欄の枠一箇所のみ。

div {
    border-radius: 10px;	/* CSS3草案 */
    -webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
    -moz-border-radius: 10px;	/* Firefox用 */
}

div { border-radius: 10px; /* CSS3草案 */ -webkit-border-radius: 10px; /* Safari,Google Chrome用 */ -moz-border-radius: 10px; /* Firefox用 */ }

※角丸表示をブラウザに依存しない java スクリプトが人気のようだ。
ここでは使用しないことにしたが、興味があれば以下でどうぞ。
border-radius.js

“css 角丸” への1件の返信

  1. KHTML用の角丸指定を追加した。

    -khtml-border-radius: 10px;

    khtmlとは、linux KDE プロジェクトが開発したHTMLレンダリングエンジン。
    これで Konqueror (というブラウザ)でも角丸が表現される。

コメントは受け付けていません。

モバイルバージョンを終了