BOOKS
by Sukeharu Kano / 狩野祐東 著書

多彩な機能のborder-radius

2014-10-29

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

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

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

題材はこの写真

題材はこの写真

最も基本的な書式

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

border-radius: 16px;
半径16pxの角丸四角形

半径16pxの角丸四角形

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

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

/* 左上 右上 右下 左下 の順に指定 */
border-radius: 20px 20px 0 0;
左上と右上に半径20pxの角丸を指定した例

左上と右上に半径20pxの角丸を指定した例

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

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

/* 横方向の半径 / 縦方向の半径 */
border-radius: 64px / 16px;
横の半径16px/縦の半径8pxの楕円にした例

横の半径64px/縦の半径16pxの楕円にした例

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

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

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

/* 横方向の半径 左上 右上 右下 左下 / 縦方向の半径 左上 右上 右下 左下 */
border-radius: 16px 128px 32px 8px / 64px 72px 128px 64px;
四隅の角丸半径が違う例

四隅の角丸半径が違う例

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

狩野 祐東

Web/アプリケーションUIデザイナー、エンジニア。執筆家。 アメリカ・サンフランシスコに留学、UIデザイン理論を学ぶ。Webサイトやアプリケーションのデザイン・開発、関連技術書籍の執筆を数多く手がける。株式会社Studio947代表。