Menu
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>It is quite possible in HTML 5. Your options are: Embedded SVG and <canvas> tag.
To draw circle in embedded SVG:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>Circle in <canvas>:
var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle = "red";
context.fill()<canvas id="circlecanvas" width="100" height="100"></canvas>There are a few unicode circles you could use:
* { font-size: 50px; }○
◌
◍
◎
●More shapes here.
You can overlay text on the circles if you want to:
#container {
position: relative;
}
#circle {
font-size: 50px;
color: #58f;
}
#text {
z-index: 1;
position: absolute;
top: 21px;
left: 11px;
}<div id="container">
<div id="circle">●</div>
<div id="text">a</div>
</div>You could also use a custom font (like this one) if you want to have a higher chance of it looking the same on different systems since not all computers/browsers have the same fonts installed.
border-radius:50% if you want the circle to adjust to whatever dimensions the container gets (e.g. if the text is variable length)
Don't forget the (prefixing no longer needed)-moz- and -webkit- prefixes!
div{
border-radius: 50%;
display: inline-block;
background: lightgreen;
}
.a{
padding: 50px;
}
.b{
width: 100px;
height: 100px;
}<div class='a'></div>
<div class='b'></div>As of 2015, you can make it and center the text with as few as 15 lines of CSS (Fiddle):
body {
background-color: #fff;
}
#circle {
position: relative;
background-color: #09f;
margin: 20px auto;
width: 400px;
height: 400px;
border-radius: 200px;
}
#text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle with text</title>
</head>
<body>
<div id="circle">
<div id="text">Text in the circle</div>
</div>
</body>
</html>Without any -webkit-s, this works on IE11, Firefox, Chrome and Opera, and it is valid HTML5 (experimental) and CSS3.
Same on MS Edge (2020).
.circle{
height: 65px;
width: 65px;
border-radius: 50%;
border:1px solid red;
line-height: 65px;
text-align: center;
}<div class="circle"><span>text</span></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With