CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのborder-top-right-radiusプロパティの使い方を徹底解説

CSSのborder-top-right-radiusプロパティは、要素の右上角の丸み（角丸）を個別に指定するためのプロパティです。ボックスの4つのコーナーのうち、右上だけに異なる半径を適用したい場合に便利です。

border-top-right-radiusの基本構文

border-top-right-radius: 値;

値には長さ（px、em、remなど）またはパーセンテージ（%）を指定できます。また、「水平方向の半径 垂直方向の半径」のようにスペース区切りで2つの値を指定することで、楕円形の角を作ることも可能です。

使用例

以下のコードでは、すべての角に25pxの角丸を設定した後、border-top-right-radiusプロパティを使って右上の角のみ45pxの大きな丸みを上書きしています。実際にコードを実行して、表示の違いを確認してみましょう。

<html>
   <head>
      <style>
         #rcorner {
            border-radius: 25px;
            border-top-right-radius: 45px;
            background: orange;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
      </style>
   </head>

   <body>
      <p id="rcorner">角丸のサンプル！</p>
   </body>

</html>

実行結果のポイント

この例では、オレンジ色の背景を持つ要素の左下・右下・左上の3つの角が25pxの丸みを保ち、右上の角だけが45pxと大きく丸まって表示されます。このようにborder-top-right-radiusを使うことで、デザインにアクセントをつけたり、特定の角だけ形状を変えたい場合に柔軟に対応できます。

主な指定値

  • 長さ単位（px / em / rem など）：角丸の半径を絶対値で指定します。0を指定すると角は直角になります。
  • パーセンテージ（%）：ボックスの幅や高さに対する割合で角丸を指定します。
  • 2つの値：「水平方向 垂直方向」の順で指定すると、楕円状の角丸を作成できます。

なお、border-top-right-radiusはすべての主要なモダンブラウザでサポートされているため、互換性を気にせず安心して利用できます。

  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります