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

You may use clipPath too. It's a kind of an hack but it may be easier to implement.

Assuming the follow:

• your rect is width="10" height="51"
• the top corner will be rx="5" and ry="5"

Some Notes:
So, the clipPath > rect > width is exactly the same as your rect.

Instead for clipPath > rect > height you have to consider the corner radius on top and thus the height should be rect.height + desired-corner-radius (in this case 51px + 5px).

In that way you won't touch the bottom part of your rect with the clipPath.