CSS プロパティ border-top-right-radius

CSS プロパティ border-top-right-radius：丸みを帯びたボーダーを作る

CSS プロパティ border-top-right-radius：丸みを帯びたボーダーを作る

border-top-right-radius プロパティは、要素の右上のボーダーに丸みを付けるための CSS プロパティです。このプロパティを設定することで、要素に簡単に丸みを帯びた効果を加え、ウェブデザインをより美しくすることができます。

構文と値

  • 構文

    
/* 長さ値 */
border-top-right-radius: 10px;
border-top-right-radius: 2em;

/* パーセンテージ値 */
border-top-right-radius: 10%;

/* / で区切られた2つの値 */
border-top-right-radius: 10px 5px;

  • 値の説明

    • <長さ>: px、em などの具体的な長さ単位を使用して、角丸の半径を定義します。
    • <パーセンテージ>: パーセンテージを使用して角丸の半径を定義します。要素の幅と高さに対する相対値で計算されます。
    • / で区切られた2つの値: 水平方向と垂直方向の角丸の半径をそれぞれ定義します。例えば、 10px 5px は水平方向の半径が 10px、垂直方向の半径が 5px であることを示します。

  • コード例

    
<!DOCTYPE html>
<html>
<head>
  <style>
    .rounded-corner {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      border-top-right-radius: 20px; /* 右上の角丸の半径を 20px に設定 */
    }
  </style>
</head>
<body>
  <div class="rounded-corner">丸みを帯びた四角形</div>
</body>
</html>

ブラウザの互換性

border-top-right-radius プロパティは、優れたブラウザ互換性を備えており、ほぼすべての主要なブラウザでサポートされています。

ブラウザ バージョン
Chrome 4+
Firefox 3.5+
Safari 3.1+
Edge 12+
Opera 10.5+
Internet Explorer 9+

使用シーン

  • 丸みを帯びたボタン、カード、ダイアログなどの UI 要素を作成する。
  • 画像に丸みを帯びた効果を追加する。
  • より柔らかく、美しいページレイアウトを実現する。

まとめ

border-top-right-radius プロパティは、Web 開発者に要素の角丸を簡単に制御する方法を提供し、Web デザインの自由度と美しさを向上させます。

参考資料

関連するQA

  1. Q: border-top-right-radius プロパティで楕円形の角丸を作ることはできますか？

    A: はい、可能です。水平方向と垂直方向の半径に異なる値を設定することで、楕円形の角丸を作成することができます。例えば、border-top-right-radius: 20px 10px; と設定すると、水平方向の半径が 20px、垂直方向の半径が 10px の楕円形の角丸が作成されます。

  2. Q: border-top-right-radius プロパティはすべての要素に適用できますか？

    A: いいえ、ボーダーを持つ要素にのみ適用できます。例えば、div 要素や p 要素などに適用できます。

  3. Q: border-radius プロパティと border-top-right-radius プロパティの違いは何ですか？

    A: border-radius プロパティは、すべての角に同じ角丸を適用するためのショートハンドプロパティです。一方、border-top-right-radius プロパティは、右上の角にのみ角丸を適用するためのプロパティです。