CSS3〜角丸

　某サイトで、見出しに角丸付きの矩形を入れてみました。

　使ったのはCSS3です。


ピンクの矩形部分は以下の通り。

CSSファイル
/* --- 角丸 --- */
.roundcorner {
border-radius: 10x; /*一般*/
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; /* Firefox用 */
}


当該ページ
<div style="border-top:#F66 2px solid; border-right:#F66 5px solid; border-bottom:#F66 5px solid; border-left:#F66 2px solid; margin-top:1.4em; padding:1em; background-color:#ffeafe;" class="roundcorner">
<div style="text-align:center; font-weight:bold; font-size:large;">○○○○<br />○○○○
</div>
<div style="text-align:right;">○○○○</div>
</div>

　当ブログで再現してみます。

○○○○
○○○○

○○○○

　私はChromeとSafariで確認しました。InternetExplorer 11では駄目でした。
　四隅全部を半径10ピクセルの丸みを付けています。

　ソースは以下の通り。
　CSSファイルを別に用いないで、タグ内に角丸の記述をしました。

<div style="border-top:#F66 2px solid; border-right:#F66 5px solid; border-bottom:#F66 5px solid; border-left:#F66 2px solid; margin-top:1.4em; padding:1em; background-color:#ffeafe;

border-radius: 10x;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;">

<div style="text-align:center; font-weight:bold; font-size:large;">○○○○<br />○○○○
</div>
<div style="text-align:right;">○○○○</div>
</div>

　左右・上下で線の太さが違うのですが、角のところで滑らかに太さを変えているのが見事です。