How to create this shape (quadilateral with rounded corners) in CSS?

I am building a widget in React Js, and in the design, this image is in the background.

My problem is the background color is dynamic and the width and height may change according to the devices. I tried using inline SVG(I can control fill color in this way but not the size) and also SVG inside img tag (I can control size in this way but not the color), but I cannot control both color and size.

Edit - inline SVG code snippet -

<svg width="360" height="349" viewBox="0 0 300 349" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 20C0 8.9543 8.95431 0 20 0H280C291.046 0 300 8.95431 300 20V187.023C300 194.606 295.711 201.537 288.925 204.921L0 349V20Z" fill="#5795fa"></path></svg>

I tried changing that widht, but the svg is created for that particular width, so it's not changing.

It will be great if someone can help me to create this shape using CSS or any other way in which I can control both color and size.

Any help is appreciated.

Solution

Just remove width, height and fill attributes and use css:

svg {
    width: 360px;
    fill: #5795fa;
}

<svg viewBox="0 0 300 349" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 20C0 8.9543 8.95431 0 20 0H280C291.046 0 300 8.95431 300 20V187.023C300 194.606 295.711 201.537 288.925 204.921L0 349V20Z"></path></svg>