Border radius in SVG d3 - svg

Question

I have following svg:
` svg.append('g')
.append("path")
.attr("d", "M 0 150 L 0 0 L 190 0 L 190 150 Z")
.attr("fill", "#f6f6f6"); `
Look like this:
But I want like this:
I don't have much knowledge about svg curve. How can I set border radius like this?

Answer 1

Done with Quadratic Bezier path:
svg {
background-color: #aaa;
}
<svg width="300" height="180">
<g transform="translate(10,10)">
<path d="M 60,0 H 180 Q 190,0 190,10 V 140 Q 190,150 180,150 H 10 Q 0,150 0,140 V 60 Q 0,0 60,0 Z" fill="#d6d6d6"/>
</g>
</svg>

Answer 2

You can find a detailed description of path here:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
The simplest way to round a corner is Quadratic Bezier path.
For example, if you need to round a top-right corner with approximate radius r, and the coordinate of the corner are x and y, The path will look like this:
Move to (M) / Line to (L) / Horizontal line (H) to x - r, y
Quadratic Bezier (Q) to x, y + r via x, y
Line to (L) / Vertical line (V) to the next point
For example, if the radius is 20 and the corner is in the point 100,100 the path will be H 80,100 Q 100,100 100,120 V ...