Is it possible to create a circle using a <rect> tag and border-radius?

Question

Guys, I am aware that <circle> tag exists but I need to make a circle using <rect>.
I want my circle to consist out of two half circles. Therefore, I've created two rectangles in one <svg>. Now, I'm trying to round them up.

Answer 1

You can create a circle using a path tag:

https://code.sololearn.com/WT6Fsm0niHjm/?ref=app

Answer 2

You can "round" a svg <rect> element using 'rx' and 'ry' attributes... but, unlike html box css 'border-radius', you cannot control each corner independently from each others, so to draw only half circle using <rect> svg element, you need to mask half of it to workaround:

<svg height="160px" width="140px" style="border:2px dashed silver">
<clipPath id="mask-top">
<rect height="50px" width="100px" x="20px" y="20px"></rect>
</clipPath>
<rect id="half-circle-top" height="100px" width="100px" x="20px" y="20px" stroke="red" fill="limegreen" rx="50%" ry="50%" clip-path="url(#mask-top)"></rect>
<clipPath id="mask-bottom">
<rect height="50px" width="100px" x="20px" y="90px"></rect>
</clipPath>
<rect id="half-circle-top" height="100px" width="100px" x="20px" y="40px" stroke="royalblue" fill="cyan" rx="50%" ry="50%" clip-path="url(#mask-bottom)"></rect>
</svg>

Obviously, if you use some stroke as outline of the "half-circles", you need to take account of that when defining the clipping path, to avoid clipping outline of your main shape, and if you want draw outline whole around the shapes, you need to use some <line> independant element for the diameter (as the "half-circle" is defined by cliping a whole circle, the base outline stroke doesn't draw it) ;)

Answer 3

🇵🇱Amadeus thankyou! your option is a really cool suggestion and that course is just gorgeous. It explains path and svg very well. thankyou very much

Answer 4

Thankyou very much for a detailed answer!

Answer 5

Thankyou Amadeus! It is helpful for me 😊

Answer 6

Thankyou again 🙄

Answer 7

🇮🇷 M N hahah that's a cool code 😎👍

Answer 8

You can learn more about SVG paths from this famous code:

https://code.sololearn.com/Wnc1H3jaH0ua/?ref=app

Answer 9

see my code to generate and zoom into mandelbrot set fractal, using html5 progress and worker, css, javascript and some math

https://code.sololearn.com/WNvSp3Q9S5GD/?ref=app
https://www.sololearn.com/discuss/1196672/?ref=app