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

<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>

Some Notes:
So, the clip with is exactly the same as you rect because you want the corner radius on top and the clipPath is exactly rect.height + desired-corner-radius.

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

Answer 2

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;
  }

<svg viewbox="0 0 10 50">
  <path d="M1 49 V5 Q1 1 5 1 H9 V49z"
        fill="rgba(255, 122, 0, 0.8)" />
</svg>

Answer 3

Use the <path> element with the arc command (http://devdocs.io/svg/attribute/d#arcto).

Syntax: a rx,ry x-axis-rotation large-arc-flag sweep-flag dx,dy

<svg width="200" height="200" viewBox="0 0 10 10">
  <path d="M0,8 v-3 a5,5 0 0 1 5,-5 h3 v8 z" />
</svg>