how to add border radius on SVG path (javacsript)

Question

I could use a little help with setting border-radius on each side of rectangle . Here’s the current code rectangle svg path tag

`M0,53H415.4285583496094V57H0V53Z`

I want to give the each corner of the rectangle a rounded shape. How is it possible? I am not able to apply like border radius properly. I already try using SVG path generator, but still not really understand how to use that to make such a border radius on that

Answer 1

You can't apply a border radius on a <path> element.
But it can be set for <rect> primitives. See Mdn Docs: rect.

You would define the border radius via rx and ry properties:

<rect x="0" y="53" width="415.43" height="4" rx="2" ry="2"  />

If you need to convert to convert a rect to a path element, you could use the pathdata polyfill by Jarek Foksa

// convert rect to path
let rect = document.querySelector('rect');
let rectPath = rect.getPathData({normalize:true}) 

{normalize:true} will return an array of path commands using only a reduced set of command types (M, L, C, Z – with absolute coordinates).
This option can also be used to convert primitives like rect, circle, polygon, line etc. to path d data. So you will have to create a new path element an set the retrieved pathdata to the new path's d attribute.

let path = document.querySelector('path')
//let bb = path.getBBox()
//console.log(bb)

let rect = document.querySelector('rect');
// convert rect to path
let rectPath = rect.getPathData({
  normalize: true
})
let newSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
newSvg.setAttribute('viewBox', '0 0 415.43 100');
let rectPathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
rectPathEl.setPathData(rectPath)
document.body.appendChild(newSvg);
newSvg.appendChild(rectPathEl);


console.log(rectPathEl.getAttribute('d'))

svg {
  display: block;
  width: 30em
}

<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill@1.0.3/path-data-polyfill.js"></script>
<p>Path </p>

<svg viewBox="0 0 415.43 100">
<path d="M0,53 H415.4285583496094 V57 H0 V53 Z" />
</svg>

<p>Rect </p>
<svg viewBox="0 0 415.43 100">
<rect x="0" y="53" width="415.43" height="4" rx="2" ry="2"  />
</svg>

<p>Rect converted to path</p>

Answer 2

A <path> element cannot really have radii at its corners. You can of course generate any kind of rounded path by defining suitable curve segments (C and S in the d attribute). Alternatively you can replace the <path> by a <rect> element, as I have done in the following snippet. I changed the height to 10 times the amount in order to make the rounding with a radius of 4 possible

<svg viewbox="0 0 500 100" fill="none" stroke="black">
<rect x="0" y="53" width="415.4286" height="40" rx="4" ry="4">
</svg>