Rounded corner only on one side of svg

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

Assuming the follow:

  • your rect is width="10" and 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 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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)