Tweet

Pocket

HTML5では画像やJavaScriptを使わずに、角丸のレイアウトを実装することができます。

【使用例】

p {
　　border-radius:10px;
　　-moz-border-radius:10px;
　　-webkit-border-radius:10px;
　　border:1px solid #0000FF;
　　padding:5px;
　　}

「border-radius」で角丸を指定します。FirefoxとSafari、Chromeではベンダープレフィックスを付けた「-moz-border-radius」「-webkit-border-radius」で指定します。

【書式】

border-radius:[水平方向の半径] [垂直方向の半径];

垂直方向の半径の値を省略した場合は、水平方向の半径が両方に適応されます。
また、角丸レイアウトを適応する領域の4つ角の半径を別々に指定することもできます。

【角丸を指定するプロパティ】
全体 → border-radius
右上 → border-top-right-radius
右下 → border-bottom-right-radius
左下 → border-bottom-left-radius
左上 → border-top-left-radius

【対応ブラウザ】
FireFox3.5以降、Opera10.6以降、Safari4以降、Chrome3以降