ywork2020.com

Title

要素の境界線の右上の角を丸くする

目次 (INDEX)

border-top-right-radiusとは

ここで説明するborder-top-right-radius とは次の語句からなるCSSのプロパティです。
border
読み: ボーダー
意味: 領域、縁、端、境界
top
読み: トップ
意味: 上
right
読み: ライト
意味: 右
radius
読み: レイディアス、ラジアス
意味: 半径

目次に戻る

border-top-right-radiusプロパティの概要

このプロパティは要素の境界線の右上の角を丸く描画することができる個別プロパティです。

四つの角の描画を一括で設定するには border-radius を使用してください。

目次に戻る

構文

このプロパティの構文の記述は以下のような書き方になります。

セレクター{border-top-right-radius: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のdiv要素にプロパティを適用させて結果を見ていきたいと思いますが、 要素の境界線が表示されていなければ角を丸くしても分かりづらいので、予め境界線が表示されるように次の設定をしています。

div要素
線の太さ: medium
線のスタイル: solid
線の色: black

div{
	background-color: ##khaki;
	border: medium solid ##black;
}

目次に戻る

初期値: 0

このプロパティの初期値は「0」です。 これは角から円の中心点までのオフセットが0ということです。 0は「なし」という意味で簡単に解釈されてもよいと思います。

結果として右上の角は丸くなりません。

div要素

div{border-top-right-radius: 0;}

目次に戻る

数値: 単位付き数値で半径を指定する

半径値に単位付き数値を指定することで境界の角を丸くすることができます。 この場合、要素の右上の角を起点として要素の中心点へ向かい、指定値分だけオフセットした位置が円の中心点となります。

詳しい単位についてはCSSの単位についてを参照してください。

div要素

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

目次に戻る

パーセンテージ値: パーセント値で半径を指定する

半径値をパーセントで指定することで境界の角を丸くすることができます。 この場合、要素の右上の角を起点として要素の中心点へ向かい、要素の辺の長さ×指定%だけオフセットした位置が円の中心点となります。

詳しい単位についてはCSSの単位についてを参照してください。

div要素

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

目次に戻る

楕円にする

2つの数値を使って半径の中心点を設定した場合、最初の値は水平方向のオフセット値であり、2番目の値は垂直方向のオフセット値となります。 2つの値が違う場合には丸みは楕円になります。

div要素

div{border-top-right-radius: 80px 50px;}

目次に戻る

グローバル値

border-top-right-radiusプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

  • inheritは親要素の値の継承を促します。
  • initialは値を初期値の0に戻します。
  • unsetは継承の初期値に戻します。
    ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。
セレクター{border-top-right-radius: グローバル値;}

目次に戻る

補足説明

  • すべての要素に適用可能
  • 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

border-top-right-radius: 0;

border-top-right-radius: 50px;

border-top-right-radius: 70% 20%;

サンプル: ブロック要素

サンプル: インライン要素

目次に戻る