How do you draw a circle using HTML5 and CSS3?
Is it also possible to put text inside?
You can't draw a circle per se. But you can make something identical to a circle.
You'd have to create a rectangle with rounded corners (via border-radius
) that are one-half the width/height of the circle you want to make.
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
}
<div id="circle"></div>