html - Rounded corner only on one side of svg <rect>

Question

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

<rect x="35" y="-135" width="10" height="51" style="stroke: rgb(255, 255, 255); opacity: 0.8; fill: rgb(255, 122, 0);"></rect>

I want to give the top corner of the rectangle a rounded shape. How is it possible?
I am not able to apply border-radius property.

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"

<svg>
        <defs>
            <clipPath id="round-corner">
                <rect x="0" y="0" width="10" height="56" rx="5" ry="5"/>
            </clipPath>
        </defs>

        <!-- if you want to use x="35" y="-135" put clip-path on a `g` element --> 
        <rect width="10" 
              height="51" 
              clip-path="url(#round-corner)"
              style="stroke: rgb(255, 255, 255); opacity: 0.8; fill: rgb(255, 122, 0);"></rect>
    </svg>