Rounded corner only on one side of svg

Question

I am trying to implement a bar chart like diagram. I have the following html element

Answer 1

As commented by Robert Longson you need to convert your rect element to a path element to control the rounded corners.

In the following example, I used a cubic bezier curve with the Q command to make the top left rounded corner (Q1 1 5 1 in the d attribute):

svg{
  height:90vh;
  width:auto;
  }