CODEWITHSUNDEEP
htmlcsssvgsvg-rect
1.21 gigawatts
1.21 gigawatts

Reputation: 17770

How to create a rectangle with two rounded corners across the top?

How do I make two rounded cornered rectangle at the top left edge and top right edge preferably as an SVG rectangle?

Is the only way to do this is to convert the rectangle to a path?

The reason I do NOT want to use a path is because if I set the width of the path to 100% the path is distorted. If I set the width of a rectangle to 100% the rectangle is NOT distorted but it doesn’t support individual corner radius.

What can I do?

Upvotes: 0

Views: 934

Answers (1)

Abhishek Mittal
Abhishek Mittal

Reputation: 183

Try wrapping up your svg into a div and then give border-top-right-radius and border-top-left-radius to whatever value you want to have round corners on top.

Upvotes: -2

Related Questions