Draw SVG Rounded Rectangle Path

svg-rounded-rectangle-path.js

/**
 * Get path data for a rounded rectangle. Allows for different radius on each corner.
 * @param  {Number} w   Width of rounded rectangle
 * @param  {Number} h   Height of rounded rectangle
 * @param  {Number} tlr Top left corner radius
 * @param  {Number} trr Top right corner radius
 * @param  {Number} brr Bottom right corner radius
 * @param  {Number} blr Bottom left corner radius
 * @return {String}     Rounded rectangle SVG path data
 */

var roundedRectData = function (w, h, tlr, trr, brr, blr) {
  return 'M 0 ' + tlr
    + ' A ' + tlr + ' ' + tlr + ' 0 0 1 ' + tlr + ' 0'
    + ' L ' + (w - trr) + ' 0'
    + ' A ' + trr + ' ' + trr + ' 0 0 1 ' + w + ' ' + trr
    + ' L ' + w + ' ' + (h - brr)
    + ' A ' + brr + ' ' + brr + ' 0 0 1 ' + (w - brr) + ' ' + h
    + ' L ' + blr + ' ' + h
    + ' A ' + blr + ' ' + blr + ' 0 0 1 0 ' + (h - blr)
    + ' Z';
};

Mate, this helped me a lot. Thank you very much! 😀

This is awesome. Thanks !

Thanks, bro, this is really helpful!

Thanks!

Thank you very much for this gist! 🤩
It was amazing helpful!

thank you so much!!!!!!!!!

Great!

Just to share a modified version. Cheers!

https://gist.github.com/aPinix/708391fe11f50574494e041e8608e22c

https://codepen.io/aPinix/pen/dyRvjQq

Thanks!!! That helped me a lot!

perfect! thanks!

This is beautiful, thanks! I asked ChatGPT to make it even more beautifuler 😉

/**
 * Get path data for a rounded rectangle. Allows for different radius on each corner.
 * @param  {Number} w   Width of rounded rectangle
 * @param  {Number} h   Height of rounded rectangle
 * @param  {Number} tlr Top left corner radius
 * @param  {Number} trr Top right corner radius
 * @param  {Number} brr Bottom right corner radius
 * @param  {Number} blr Bottom left corner radius
 * @return {String}     Rounded rectangle SVG path data
 */
function roundedRectData(w, h, tlr, trr, brr, blr) {
  return `
    M 0 ${tlr}
    A ${tlr} ${tlr} 0 0 1 ${tlr} 0
    L ${w - trr} 0
    A ${trr} ${trr} 0 0 1 ${w} ${trr}
    L ${w} ${h - brr}
    A ${brr} ${brr} 0 0 1 ${w - brr} ${h}
    L ${blr} ${h}
    A ${blr} ${blr} 0 0 1 0 ${h - blr} Z
  `;
}