Sep 1, 2026

The rect element in SVG draws a rectangle. The element has rx and ry attributes to specify corner radius for rounded rectangles. The radius is applied to all corners. Rounded rectangles with different corner radii requires using path and calculating arcs for smooth corners.

function roundedRect( { 
  x = 0, 
  y = 0, 
  width, 
  height, 
  topLeft = 13, 
  topRight = 13, 
  bottomRight = 0, 
  bottomLeft = 0, 
  fill, 
  stroke = 'none', 
  strokeWidth, 
  className 
} ) {
  const maxRadius = Math.min( width, height ) / 2;
  [topLeft, topRight, bottomRight, bottomLeft] = [
    topLeft, topRight, bottomRight, bottomLeft
  ].map( ( r ) => Math.min( r, maxRadius ) );

  const d = [
    `M ${x + topLeft} ${y}`,
    `L ${x + width - topRight} ${y}`,
    `A ${topRight} ${topRight} 0 0 1 ${x + width} ${y + topRight}`,
    `L ${x + width} ${y + height - bottomRight}`,
    `A ${bottomRight} ${bottomRight} 0 0 1 ${x + width - bottomRight} ${y + height}`,
    `L ${x + bottomLeft} ${y + height}`,
    `A ${bottomLeft} ${bottomLeft} 0 0 1 ${x} ${y + height - bottomLeft}`,
    `L ${x} ${y + topLeft}`,
    `A ${topLeft} ${topLeft} 0 0 1 ${x + topLeft} ${y}`,
    'Z'
  ].join( ' ' );

  const attrs = [
    `d="${d}"`,
    fill !== undefined ? `fill="${fill}"` : null,
    `stroke="${stroke}"`,
    strokeWidth !== undefined ? `stroke-width="${strokeWidth}"` : null,
    className ? `class="${className}"` : null
  ].filter( Boolean ).join( ' ' );

  return `<path ${attrs} />`;
}