SVGを使用した矩形のボーダー半径の設定方法

方法1: rx と ry 属性を使用する方法 SVGの矩形要素(<rect>)には、rx 属性と ry 属性を使用してボーダー半径を指定することができます。以下は例です。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <rect x="50" y="50" width="100" height="100" rx="10" ry="10" />
</svg>

この例では、矩形の左上隅と右上隅の角が丸められ、ボーダー半径は10ピクセルです。

方法2: CSSのスタイルシートを使用する方法 SVG要素にはCSSスタイルシートを適用することもできます。以下は例です。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <style>
    .rounded-rect {
      border-radius: 10px;
    }
  </style>
  <rect x="50" y="50" width="100" height="100" class="rounded-rect" />
</svg>

この例では、rounded-rect クラスが矩形要素に適用され、ボーダー半径が10ピクセルに設定されます。

これらの方法を使用することで、SVGを使って矩形のボーダー半径を設定することができます。必要に応じて、rx、ry 属性やCSSスタイルシートを調整して、好みの形状を作成してください。