How to Fill and Stroke the SVG rectangle with corners with negative radius? -

i need create block specific borders around it:

i want have block scalable, why try doing svg.

here i've done:

<svg xmlns="http://www.w3.org/2000/svg" preserveaspectratio="none slice" viewbox="0 0 300 400">   <path stroke-width="1" stroke="#7dd37d" fill="red" d="     m20 0h260     m20 20v360     m-20 20h20     m-20 -20v20     m0 20a20 20 0 0 0 20 -20     m300 20a20 20 0 0 1 -20 -20     m300 380a20 20 0 0 0 -20 20     m0 380a20 20 0 0 1 20 20" id="path"/> </svg> 

demo on codepen

the border created path lines , arcs. problem is, can't make svg fill area inside path. fills space inside arcs instead of rectangle. i'm doing wrong?

when similar inkscape, resulting path combined lines , cubic bezier curves. can done simple arcs instead of bezier curves?

each time use move ('m' or 'm') path command, creates new subpath. each subpath gets filled, not whole thing.

if want whole thing filled, has continuous path. in other words, in case, should move followed line, arc, line, , arc, , on until have completed 4 sides of shape.