How do I make two rounded cornered rectangle at the top left edge and top right edge preferably as an SVG rectangle?
Is the only way to do this is to convert the rectangle to a path?
The reason I do NOT want to use a path is because if I set the width of the path to 100% the path is distorted. If I set the width of a rectangle to 100% the rectangle is NOT distorted but it doesn’t support individual corner radius.
What can I do?
Try wrapping up your svg into a div and then give border-top-right-radius and border-top-left-radius to whatever value you want to have round corners on top.