border-top-right-radius - 要素の右上を丸める

投稿日: / 更新日:

スタイルシートのborder-top-right-radiusは、要素の右上の形状を調整するためのプロパティです。

サンプルコード

border-top-right-radiusを指定した例です。

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

デモ

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

値の指定

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

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

仕組み

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

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

ブラウザのサポート

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

  • 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月