Summary -

In this topic, we described about the SVG Drawing Rounded Rectangle with detailed example.

<svg> with <rect> element used to draw the rounded rectangle. There is no specific element to create rounded rectangular. In rounded rectangle, we can use the rx and ry attributes to round the corners of the rectangle.

Syntax -

<rect x="x-value" y="y-value" rx="rx-value" ry="ry-value" 
		width="width-value" height="height-value"
		fill="color-name" stroke="stroke-color-name" 
			stroke-width="stroke-width-in-pixels"/>

Attribute Value
x Specifies the distance from x-axis.
y Specifies the distance from y-axis.
rx Specifies the rounding value of x-axis.
ry Specifies the rounding value of y-axis.
width Specifies the width of rectangle.
height Specifies the height of rectangle.
fill Specifies the fill environment of rectangle.
stroke Specifies the outline color. 
stroke-width Specifies the width of stroke. 

The rx and the ry attributes rounds the corners of the rectangle.

Example -

Below example describes how to create rounded rectangle shape with SVG.
<!DOCTYPE html>
<html>
	<body>
		<svg width="300" height="200">
			<rect x="60" y="20" rx="30" ry="30" width="150" height="150"
		   style="fill:yellow;stroke:blue;stroke-width:5;opacity:0.5;"/>
		</svg> 
	</body>
</html>

Output-