CSSの比較的新しい機能の中でも、ボックスの角を丸くするborder-radiusプロパティは、使い方も簡単で効果も絶大。いままでは画像編集ソフトで角を丸くしていましたがその作業も必要なくなり、後からいくらでも角の丸め具合を変更できて楽しいプロパティです。IE9から対応しているので、新しい機能のわりに多くのブラウザをサポートできます。

関連：『スラスラわかるCSSデザインのきほん』P.126、176

この記事ではこの写真を題材に使います。残念ながらこの周辺でしめさばは売っていませんでした。158円って結構安いと思うんだけど。

最も基本的な書式

　border-radiusにはいくつかの書式パターンがあります。そのうち最も簡単なのはプロパティ値を1つだけ書く方式で、ボックス（ここでは<img>）の四隅の角を同じように丸めます。数値は角を丸くする半径を指定します。

border-radius: 16px;

四辺で異なる半径を指定する書式

　半角スペースで区切って数値を指定すると、四辺で異なる半径を指定することができます。半径のプロパティ値は「左上─右上─右下─左下」の順に指定します。marginプロパティやpaddingプロパティと同じように数値を省略することもできます。

/* 左上 右上 右下 左下 の順に指定 */
border-radius: 20px 20px 0 0;

実は楕円にすることもできる

　上の2つの書式は書籍（スラスラわかるCSSデザインのきほん）でも取り上げています。次に紹介するのは少し書式が複雑になるため紹介しませんでしたが、角丸は楕円にすることもできます。プロパティ値を「横方向の半径 / 縦方向の半径」にすると楕円の角丸になります。

/* 横方向の半径 / 縦方向の半径 */
border-radius: 64px / 16px;

　いや〜ちょっとパワーポイントのかっこわるい（失礼）オートシェイプみたいな。まあたいていの場合パワーポイントが悪いのではなくて作る人の問題ではありますが。いやいや、ソフトのせいにしておくのが人間界の正解。

border-radiusでいちばん複雑な書式

　はい。気を取り直してborder-radiusで最高に複雑な書式です。想像どおり、四辺に異なる楕円角丸を指定することができます。この場合、「横方向の半径 左上 右上 右下 左下 / 縦方向の半径 左上 右上 右下 左下」と記述します。ちょっと複雑です。複雑なわりに効果のほどは……　まずはご覧ください。

/* 横方向の半径 左上 右上 右下 左下 / 縦方向の半径 左上 右上 右下 左下 */
border-radius: 16px 128px 32px 8px / 64px 72px 128px 64px;

　うわーかなり気持ち悪い形が作れてしまいます。気を取り直せなかったような気も。この書式はかなり複雑な上に実用性も怪しいものですが、なにかの機会に使えるかもしれません。いろいろ試してみてください。