1

I am trying to use js svg library to make a rectangle with only top left corner rounded. I found in it's documentation this example:

script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js"></script>
<script>
    var draw = SVG().addTo('#graphix').size(300, 300);
    var rect = draw.rect(300, 300).attr({ fill: '#f06' });
    rect.radius(100);
   
    //rect

  //end
</script>

it rounds all of the corners. Is it posible using this library to round only top left or top right corner? Or what should I use as an alterative? I realy can't get it in the previous question that was associated with my post. Solution simply doesn't work. I tryed to use some examples from question here svg / d3.js rounded corner on one corner of a rectangle rounded corner on one corner of a rectangle but those examples are rounding whole right side instead of doing it only for one corner for example top right/left. The main problem for me is that I have different radius for different corners.

IvanIvanow
  • 13
  • 3

1 Answers1

2

You can make a div instead of SVG, then use border-radius to round it.

<div style='width:100px;height:100px;background-color:red;border:1px solid black;border-top-left-radius:15px;border-top-right-radius:15px;'></div>

You can change the border radius, background color, width, height and more by just changing the numbers that I added.

Reality
  • 637
  • 1
  • 6
  • 25