border-radius - 要素の枠線を丸める

投稿日: / 更新日:

スタイルシートのborder-radiusは、要素の形状を、まとめて調整するためのプロパティです。俗に言う「角丸」を実現することができます。

サンプルコード

border-radiusを指定するサンプルコードです。

div {
	border-radius: 50% ;
}

デモ

border-radiusを指定した例です。要素の、上下左右、4つの角が丸まっているのを確認して下さい。CSSタブで値を編集するとどうなるのか、試してみて下さいね。

値の指定

基本的に値に、要素の「左上」「右上」「右下」「左下」の順に、スペースで区切って4つの値を指定します。これらの値は、各角からのオフセット値(距離)です。例えば、50% 20% 30% 40%と指定すれば、左上に50%、右上に20%、右下に30%、左下に40%の値が適用されます。上(12時)から右回りになる時計と同じです。真上というわけにはいきませんが、左上から時計回りになることをイメージして下さい。左上がスタートです。

応用として、2つの値を指定すると1つ目の値が「左上」と「右下」、2つ目の値が「右上」と「左下」と、クロスの形になるように適用されます。英語の「X」を描くように、左上から斬って、右上から斬るイメージです。また、1つの値を指定すると、全ての角に適用されます。

/* 基本は4つの値を指定する */
/* [1]左上 → [2]右上 → [3]右下 → [4]左下 */
#element {
	border-radius: 50% 20% 30% 40% ;
}

/* 2つの値を指定すると「左上」と「右下」、「右上」と「左下」に適用される */
/* [1]左上と右下 → [2]右上と左下 */
#element {
	border-radius: 50% 20% ;
}

/* 1つの値を指定すると全ての角に適用される */
/* [1]全ての角 */
#element {
	border-radius: 50% ;
}

さて、基本的にこれまでの説明は、水平方向と垂直方向の値を、同じ値としてまとめて指定するものでした。水平方向と垂直方向の値を分けたい場合は、「水平方向」と「垂直方向」をスラッシュ(/)で区切って、合計で8つの値を指定します。例えば、50% 20% 30% 40% / 80% 70% 60% 50%と指定した場合、次のように各値が適用されます。

角の位置垂直方向垂直方向
左上50%80%
右上20%70%
右下30%60%
左下40%50%

水平方向と垂直方向の指定はそれぞれ、先ほど説明した応用方法に従って「4つの値」「2つの値」「1つの値」のいずれかで指定することができます。

/* 基本は4つの値を指定する */
/* [1]左上 → [2]右上 → [3]右下 → [4]左下 */
#element {
	border-radius: 50% 20% 30% 40% / 80% 70% 60% 50% ;
}

/* 2つの値を指定すると「左上」と「右下」、「右上」と「左下」に適用される */
/* [1]左上と右下 → [2]右上と左下 */
#element {
	border-radius: 50% 20% / 80% 70% ;
}

/* 1つの値を指定すると全ての角に適用される */
/* [1]全ての角 */
#element {
	border-radius: 50% / 80% ;
}

各値に指定方法は、下記の通りです。

項目説明
inherit親要素の値を引き継ぐ。例の場合、div要素のborder-radiusには、bodyに指定された値(50% 20% 30% 40% / 80% 70% 60% 50%)が引き継がれる。
initialプロパティの初期値が適用される。この場合、角は丸まらない。
percentageパーセンテージで指定すると、水平方向の場合は要素の横幅、垂直方向の場合は要素の高さに対した割合が適用される。
lengthCSSで許可された方法で、サイズの指定ができます。(単位の一覧)

仕組み

さて、指定した各値(オフセット値)や、水平方向、垂直方向といった言葉は一体、何を表しているのでしょうか？border-radiusを指定することによって、角丸がどのようにできるのか、その仕組みを解説します。理解しておくと、自在に角丸を作れるようになるでしょう。ここでは、右上の角を例にとります。右上の角に、水平方向が60px、垂直方向が80pxという指定があった場合です。

順序説明
円の中心が決まる指定した値によって、角丸を構成するための円の中心点の位置が決まります。例では水平方向に60px、垂直方向に80pxを指定したので、要素の右から60px、上から80px離れた位置(オフセット位置)に、円の中心点が設定されます。
円が作成される水平方向、垂直方向に指定した長さが、そのまま、円の水平方向の半径、円の垂直方向の半径になります。つまり、水平方向に60px、垂直方向に80pxを指定した場合、水平方向に半径60px、垂直方向に半径80pxのサイズの円が、先ほどの中心点を基準として作成されます。
円に沿って丸まるそして、円の形に沿って要素の右上が丸まります。このようにして、指定した値が角丸を形作っているんです。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。

  • Chrome

    ●

    4+

    2010年3月

  • Firefox

    ●

    3+

    2008年6月

  • Safari

    ●

    3.1+

    2008年3月

  • Ie

    ●

    9+

    2011年3月

  • Edge

    ●

    12+

    2015年3月

  • Opera

    ●

    10.5+

    2010年3月

  • Safari(iOS)

    ●

    3.2+

    2009年6月

  • Ie Mobile

    ●

    10+

    2012年6月

  • Chrome

    ●

    47+

    2015年12月

  • Android

    ●

    2.1+

    2010年1月

  • FF Mobile

    ●

    44+

    2016年1月

  • Opera Mobile

    ●

    11+

    2011年3月