How do you draw a circle using HTML5 and CSS3?
Is it also possible to put text inside?
This question is related to
html
css
geometry
css-shapes
You can use the border-radius attribute to give it a border-radius equivalent to the element's border-radius. For example:
<div style="border-radius 10px; -moz-border-radius 10px; -webkit-border-radius 10px; width: 20px; height: 20px; background: red; border: solid black 1px;"> </div>
(The reason for using the -moz and -webkit extensions is to support pre-CSS3-final versions of Gecko and Webkit.)
There are more examples on this page. As far as inserting text, you can do it but you have to be mindful of the positioning, as most browsers' box padding model still uses the outer square.
.circle {
background: green;
border-radius: 50%;
width: 1rem;
aspect-ratio: 1/1;
}
_x000D_
<div class="circle"></div>
_x000D_
Borwser support:
The followings are my 9 solutions. Feel free to insert text into the divs or svg elements.
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.fillStyle = '#B90136';
ctx.fill();
_x000D_
#circle1 {
background-color: #B90136;
width: 100px;
height: 100px;
border-radius: 50px;
}
#circle2 {
background-color: #B90136;
width: 100px;
height: 100px;
clip-path: circle();
}
#circle3 {
color: #B90136;
font-size: 100px;
line-height: 100px;
}
#circle4::before {
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50px;
background-color: #B90136;
}
#circle5 {
background-image: radial-gradient(#B90136 70%, transparent 30%);
height: 100px;
width: 100px;
}
_x000D_
<h3>1 border-radius</h3>
<div id="circle1"></div>
<hr/>
<h3>2 clip-path</h3>
<div id="circle2"></div>
<hr/>
<h3>3 html entity</h3>
<div id="circle3">⬤</div>
<hr/>
<h3>4 pseudo element</h3>
<div id="circle4"></div>
<hr/>
<h3>5 radial-gradient</h3>
<div id="circle5"></div>
<hr/>
<h3>6 svg circle & path</h3>
<svg width="100" height="100">
<circle cx="50" cy="50" r="50" fill="#B90136" />
</svg>
<hr/>
<h3>7 canvas arc()</h3>
<canvas id="myCanvas" width="100" height="100"></canvas>
<hr/>
<h3>8 img tag</h3>
<img src="circle.png" width="100" height="100" />
<hr/>
<h3>9 pre tag</h3>
<pre style="line-height:8px;">
+++
+++++
+++++++
+++++++++
+++++++++++
+++++++++++
+++++++++++
+++++++++
+++++++
+++++
+++
</pre>
_x000D_
If you're using sass to write your CSS you can do:
@mixin draw_circle($radius){
width: $radius*2;
height: $radius*2;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.my-circle {
@include draw_circle(25px);
background-color: red;
}
Which outputs:
.my-circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: red;
}
Try it here: https://www.sassmeister.com/
Simply do the following in the script tags:
<!Doctype html>_x000D_
<html>_x000D_
<head>_x000D_
<title>Circle Canvas</title>_x000D_
</head>_x000D_
<body>_x000D_
<canvas id="myCanvas" width="300" height="150" style="border:1px solid _x000D_
#d3d3d3;">_x000D_
<body>_x000D_
<script>_x000D_
var c = document.getElementById("myCanvas");_x000D_
var ctx = c.getContext("2d");_x000D_
ctx.beginPath();_x000D_
ctx.arc(100, 75, 50, 0, 2 * Math.PI);_x000D_
ctx.stroke();_x000D_
</script>_x000D_
</body>_x000D_
</body>_x000D_
</html>
_x000D_
And there you go you got your circle.
There are a few unicode circles you could use:
* { font-size: 50px; }
_x000D_
○_x000D_
◌_x000D_
◍_x000D_
◎_x000D_
●
_x000D_
More shapes here.
You can overlay text on the circles if you want to:
#container {_x000D_
position: relative;_x000D_
}_x000D_
#circle {_x000D_
font-size: 50px;_x000D_
color: #58f;_x000D_
}_x000D_
#text {_x000D_
z-index: 1;_x000D_
position: absolute;_x000D_
top: 21px;_x000D_
left: 11px;_x000D_
}
_x000D_
<div id="container">_x000D_
<div id="circle">●</div>_x000D_
<div id="text">a</div>_x000D_
</div>
_x000D_
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.
h1 {_x000D_
border: dashed 2px blue;_x000D_
width: 200px;_x000D_
height: 200px;_x000D_
border-radius: 100px;_x000D_
text-align: center;_x000D_
line-height: 60px;_x000D_
_x000D_
}
_x000D_
<h1> <br>hello world</h1>
_x000D_
.at-counter-box {
border: 2px solid #1ac6ff;
width: 150px;
height: 150px;
border-radius: 100px;
font-family: 'Oswald Sans', sans-serif;
color:#000;
}
.at-counter-box-content {
position: relative;
}
.at-counter-content span {
font-size: 40px;
font-weight: bold ;
text-align: center;
position: relative;
top: 55px;
}
<head>
<style>
#circle{
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="circle"></div>
</body>
simple and novice :)
As of 2015, you can make it and center the text with as few as 15 lines of CSS (Fiddle):
body {_x000D_
background-color: #fff;_x000D_
}_x000D_
#circle {_x000D_
position: relative;_x000D_
background-color: #09f;_x000D_
margin: 20px auto;_x000D_
width: 400px;_x000D_
height: 400px;_x000D_
border-radius: 200px;_x000D_
}_x000D_
#text {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
transform: translate(-50%, -50%);_x000D_
color: #fff;_x000D_
}
_x000D_
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
_x000D_
<head>_x000D_
<meta charset="UTF-8">_x000D_
<title>circle with text</title>_x000D_
_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<div id="circle">_x000D_
<div id="text">Text in the circle</div>_x000D_
</div>_x000D_
</body>_x000D_
_x000D_
</html>
_x000D_
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{_x000D_
height: 65px;_x000D_
width: 65px;_x000D_
border-radius: 50%;_x000D_
border:1px solid red;_x000D_
line-height: 65px;_x000D_
text-align: center;_x000D_
}
_x000D_
<div class="circle"><span>text</span></div>
_x000D_
There is not technically a way to draw a circle with HTML (there isn’t a <circle>
HTML tag), but a circle can be drawn.
The best way to draw one is to add border-radius: 50%
to a tag such as div
. Here’s an example:
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>
Here's a circle that I used for a CS 1.6 stats website. A beautiful four colors circle.
#circle {
border-top: 8px ridge #d11967;
border-right: 8px ridge #d32997;
border-bottom: 8px ridge #5246eb;
border-left: 8px ridge #fc2938;
border-radius: 50%; width: 440px; height: 440px;
}
_x000D_
<div id="circle"></div>
_x000D_
You can also rotate and skew by using skewY(), skewX() and rotate():
transform: rotate(60deg);
transform: skewY(-5deg);
transform: skewX(-15deg);
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->
border-radius: 50%;
will turn all elements into a circle, regardless of size. At least, as long as the height
and width
of the target are the same, otherwise it will turn into an oval.
#target{_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background-color: #aaa;_x000D_
border-radius: 50%;_x000D_
}
_x000D_
<div id="target"></div>
_x000D_
Note: browser prefixes are not needed anymore for border-radius
Alternatively, you can use clip-path: circle();
to turn an element into a circle as well. Even if the element has a greater width
than height
(or the other way around), it will still become a circle, and not an oval.
#target{_x000D_
width: 200px;_x000D_
height: 100px;_x000D_
background-color: #aaa;_x000D_
clip-path: circle();_x000D_
}
_x000D_
<div id="target"></div>
_x000D_
Note: clip-path is not (yet) supported by all browsers
You can place text inside of the circle, simply by writing the text inside of the tags of the target,
like so:
<div>text</div>
If you want to center text in the circle, you can do the following:
#target{_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background-color: #aaa;_x000D_
border-radius: 50%;_x000D_
_x000D_
display: flex;_x000D_
align-items: center;_x000D_
}_x000D_
_x000D_
#text{_x000D_
width: 100%;_x000D_
text-align: center;_x000D_
}
_x000D_
<div id="target">_x000D_
<div id="text">text</div>_x000D_
</div>
_x000D_
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;
}
_x000D_
<div class='a'></div>
<div class='b'></div>
_x000D_
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">_x000D_
<circle cx="50" cy="50" r="50" fill="red" />_x000D_
</svg>
_x000D_
Circle in <canvas>
:
var canvas = document.getElementById("circlecanvas");_x000D_
var context = canvas.getContext("2d");_x000D_
context.arc(50, 50, 50, 0, Math.PI * 2, false);_x000D_
context.fillStyle = "red";_x000D_
context.fill()
_x000D_
<canvas id="circlecanvas" width="100" height="100"></canvas>
_x000D_
You can use border-radius property, or make a div with fixed height and width and a background with png circle.
Source: Stackoverflow.com