border-top-left-radius - 要素の左上を丸める

投稿日: / 更新日:

スタイルシートのborder-top-left-radiusは、要素の左上を丸めるためのプロパティです。

サンプルコード

border-top-left-radiusを指定した例です。別途、枠線を用意する必要はありません。

div {
	border-top-left-radius: 50% 50% ;
}

デモ

border-top-left-radiusを指定した例です。要素の左上が丸まっているのを確認して下さい。

値の指定

値は、水平方向、垂直方向の順に2つの値を指定します。例えば、10px 20pxと指定した場合、左端から10px右に、上端から20px下に離れた位置が円の中心となります。2つではなく、1つの値を指定すると、水平方向、垂直方向、どちらにもその値が適用されます。値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

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

仕組み

border-top-left-radiusを指定することによって、角丸ができる仕組みを解説します。理解しておくと、値を指定する時に迷うことがなくなります。ここでは、border-top-left-radiusに90px 70pxを指定したのを想定します。

順序説明
円の中心が決まる指定した値によって、角丸を構成するための円の中心点の位置が決まります。例では90px 70pxを指定したので、要素の左から90px、上から70px離れた位置に、円の中心点が設定されます。
円が作成される水平方向、垂直方向に指定した長さが、そのまま、円の水平方向の半径、円の垂直方向の半径になります。つまり、90px 70pxを指定した場合、水平方向に半径90px、垂直方向に半径70pxのサイズの円が、中心点を基準として作成されます。
円に沿って丸まるそして、今回はborder-top-left-radiusなので、円の左上に沿って、要素の左上が丸まります。このように、指定した値が影響を与えています。

ブラウザのサポート

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月