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

CSSで右上の角丸を設定する方法｜border-top-right-radiusの使い方

CSSで要素の右上の角だけを丸くしたい場合は、border-top-right-radiusプロパティを使用します。このプロパティを指定すると、右上隅のみに丸みを帯びた境界線を設定でき、ボックス全体のデザインに柔らかさやアクセントを加えることができます。

border-top-right-radiusの基本

border-top-right-radiusには、px・em・%などの単位で値を指定します。値が大きいほど角の丸みが大きくなり、0を指定すると直角に戻ります。

サンプルコード

以下のコードは、border-top-right-radiusプロパティを使って右上の角だけを大きく丸める実装例です。

<html>
    <head>
        <style>
            #rcorner {
                border-radius: 25px;
                border-top-right-radius: 45px;
                background: orange;
                padding: 20px;
                width: 400px;
                height: 250px;
            }
        </style>
    </head>
    <body>
        <p id = "rcorner">Rounded border-top-right corner!</p>
    </body>
</html>

コードの解説

この例では、まずborder-radius: 25px;によって4つの角すべてに25pxの丸みを設定しています。その後、border-top-right-radius: 45px;を指定することで、右上の角だけを45pxと他よりも大きく丸めています。

  • background: orange; … 背景色をオレンジに設定し、角丸がわかりやすくなっています。
  • padding: 20px; … 内側の余白を確保し、テキストを見やすくしています。
  • width / height … ボックスのサイズをそれぞれ400px×250pxに固定しています。

まとめ

border-top-right-radiusを使えば、右上の角だけを個別に丸めることができます。同様に、左上ならborder-top-left-radius、右下ならborder-bottom-right-radius、左下ならborder-bottom-left-radiusを使用することで、4つの角それぞれに異なる丸みを自由に設定できます。

  1. CSSで右下の角だけを丸くする方法｜border-bottom-right-radiusの使い方

    CSSで要素の右下の角だけを丸くしたい場合は、border-bottom-right-radiusプロパティを使用します。このプロパティに値を指定することで、四隅すべてではなく、右下隅にのみ個別の角丸（ラウンドコーナー）を適用できます。 以下のサンプルコードでは、border-bottom-right-radiusプロパティを使って、右下の角だけを大きく丸めたボックスを作成しています。実際にブラウザで実行して動作を確認してみてください。 サンプルコード <html>    <head>       <style&

  2. CSSで左上の角を丸くする方法｜border-top-left-radiusの使い方

    要素の左上の角だけを丸くしたい場合は、CSSの border-top-left-radius プロパティを使用します。このプロパティを使うことで、要素全体の角ではなく、左上のコーナーのみに個別の角丸を適用できます。以下は、border-top-left-radius プロパティを使って左上の角を丸くする具体的なコード例です。実際にブラウザで実行して、表示結果を確認してみてください。コード例<html>    <head>       <style>         &n