Rounded corner only on one side of svg <rect>

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.

Asked By: Dhanya

Source

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>

Expand snippet

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.

Answered By: borracciaBlu

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>

Expand snippet

Answered By: web-tiki

Answer #3:

Wrote an article explaining this https://medium.com/@dphilip/one-side-rounded-rectangle-using-svg-fb31cf318d90

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path
    d="M10,40
       h50
       q5,0 5,5
       v10
       q0,5 -5,5
       h-50
       z
    "
    fill="#4EDFA5"
  >
<svg>

Expand snippet

Answered By: Dennis Mathew Philip

Answer #4:

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>

Expand snippet

Answered By: adius

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .