+ 2
draw a rectangle with round edge and border?
4 Answers
+ 4
then you code this for CSS : #rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
+ 3
if you want a round edge rectangle,: HTML code: <div id="rcorners1">This Div is Round</div>
+ 3
but for svg : <svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
+ 2
The x attribute defines the left position of the rectangle (e.g. x="50" places the rectangle 50 px from the left margin)
The y attribute defines the top position of the rectangle (e.g. y="20" places the rectangle 20 px from the top margin). The rx and the ry attributes rounds the corners of the rectangle.