How to draw circle in html page? - html
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>
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 -moz- and -webkit- prefixes! (prefixing no longer needed)
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>
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{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
}
<div id="target"></div>
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{
width: 200px;
height: 100px;
background-color: #aaa;
clip-path: circle();
}
<div id="target"></div>
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{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
display: flex;
align-items: center;
}
#text{
width: 100%;
text-align: center;
}
<div id="target">
<div id="text">text</div>
</div>
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.
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>
You can use border-radius property, or make a div with fixed height and width and a background with png circle.
h1 {
border: dashed 2px blue;
width: 200px;
height: 200px;
border-radius: 100px;
text-align: center;
line-height: 60px;
}
<h1> <br>hello world</h1>
The followings are my 9 solutions. Feel free to insert text into the divs or svg elements.
border-radius
clip-path
html entity
pseudo element
radial-gradient
svg circle & path
canvas arc()
img tag
pre tag
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();
#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;
}
<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>
Simply do the following in the script tags:
<!Doctype html>
<html>
<head>
<title>Circle Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid
#d3d3d3;">
<body>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</body>
</html>
And there you go you got your circle.
.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 :)
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;
}
<div id="circle"></div>
Adjust the circle diameter by chaging the width and height.
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-->
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/
No width and height requirement (specify just whichever you prefer)
No SVG, canvas or Unicode
.circle {
background: green;
border-radius: 50%;
width: 1rem;
aspect-ratio: 1/1;
}
<div class="circle"></div>
Borwser support:
Chrome/Edge 88+
Firefox 83+ behind a flag
Related
SVG width does not update when resizing window
I've found a weird issue where the rect inside the svg stays the same width as the svg on page load. Resizing the window (causing the svg to resize) doesn't update the width of the rect. Inspecting the element and toggling off/on the height or width then causes the width to update. This issue does not occur in Safari but does occur in Chrome and Firefox.
Is there a more correct way of doing the HTML and CSS to get the effect I need? I essentially want a dashed stroke around the box. I can't use dashed border as the dashes are not wide enough.
.box {
background: black;
min-height: 300px;
padding: 65px;
border-radius: 20px;
position: relative;
max-width: 700px;
margin: auto;
}
svg {
width: calc(100% - 46px);
height: calc(100% - 46px);
fill: none;
stroke: white;
stroke-dasharray: 8px;
position: absolute;
top: 23px;
left: 23px;
pointer-events: none;
}
svg rect {
width: calc(100% - 2px);
height: calc(100% - 2px);
}
<div class="box">
<svg xmlns='http://www.w3.org/2000/svg'>
<rect x='1' y='1' rx='5' />
</svg>
</div>
You can apply border-radius and padding properties to the svg and make the inner <rect> responsive using relative units.
body {
}
*{
box-sizing:border-box
}
.resize {
resize: both;
overflow: auto;
padding: 1em;
border: 1px solid red;
width: 100%;
}
.box{
width: 100%;
height:100%;
}
svg {
display: block;
width: 100%;
height:100%;
padding: 23px;
background: #000;
border-radius: 20px;
overflow:visible;
}
rect {
stroke: white;
stroke-dasharray: 8px;
stroke-width:1px;
}
<div class="resize">
<div class="box">
<svg xmlns='http://www.w3.org/2000/svg'>
<rect x='0' y='0' rx='5' width="100%" height="100%" />
</svg>
</div>
</div>
<p>Resize me</p>
overflow:visible will prevent any stroke clipping.
It is also important to set a box-sizing: border-box property - otherwise padding will introduce overflows.
This way we don't need any calc() width/height values, that can cause issues when applied to svg elements (... in some browsers).
Html bullet not appearing as expected [duplicate]
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>
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 -moz- and -webkit- prefixes! (prefixing no longer needed)
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>
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{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
}
<div id="target"></div>
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{
width: 200px;
height: 100px;
background-color: #aaa;
clip-path: circle();
}
<div id="target"></div>
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{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
display: flex;
align-items: center;
}
#text{
width: 100%;
text-align: center;
}
<div id="target">
<div id="text">text</div>
</div>
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.
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>
You can use border-radius property, or make a div with fixed height and width and a background with png circle.
h1 {
border: dashed 2px blue;
width: 200px;
height: 200px;
border-radius: 100px;
text-align: center;
line-height: 60px;
}
<h1> <br>hello world</h1>
The followings are my 9 solutions. Feel free to insert text into the divs or svg elements.
border-radius
clip-path
html entity
pseudo element
radial-gradient
svg circle & path
canvas arc()
img tag
pre tag
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();
#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;
}
<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>
Simply do the following in the script tags:
<!Doctype html>
<html>
<head>
<title>Circle Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid
#d3d3d3;">
<body>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</body>
</html>
And there you go you got your circle.
.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 :)
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;
}
<div id="circle"></div>
Adjust the circle diameter by chaging the width and height.
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-->
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/
No width and height requirement (specify just whichever you prefer)
No SVG, canvas or Unicode
.circle {
background: green;
border-radius: 50%;
width: 1rem;
aspect-ratio: 1/1;
}
<div class="circle"></div>
Borwser support:
Chrome/Edge 88+
Firefox 83+ behind a flag
Unable to see div inside canvas
I am working on the following code. Why am I not able to see the dot class in the Canvas?
canvas {
height: 200px;
width: 200px;
background: white;
position: relative
}
.overlay {
position: absolute;
top: 20px;
left: 30px;
}
.dot {
background: #eee;
height: 10px;
width: 10px;
border-radius: 25px;
}
<canvas id="map">
<div class="overlay">
<div class="dot">
</div>
</div>
</canvas>
From https://www.w3schools.com/html/html5_canvas.asp: The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. Any html inside the <canvas> element is treated as alternative content to be displayed in browsers not supporting <canvas>.
SVG Clipping on multi Browser
I Designed a measurement card where the profile image is cutted out by an half elips, i tried several methos (svg mask, svg clipping), but all these methods didn't work. Specially on Safari. Does anyone has an idea how to realize this layout? Here is the SVG Half Circle if it helps ya SVG CIRCLE
You can use the border radius to achieve this layout:
If you want an elliptic shape you have to oversize the clipping element and place the image offsetted inside it:
document.getElementById('button1').addEventListener('click', function(){
document.getElementById('profile').classList.toggle('view');
});
.profile{
background: #1111cc;
width:300px;
height:100px;
position:relative;
overflow:hidden;
margin: 20px;
}
.clip{
position:absolute;
background: red;
width: 100px;
height:130px;
top: -15px;
border-top-right-radius: 50px 65px;
border-bottom-right-radius: 50px 65px;
overflow:hidden;
}
.img{
position: absolute;
top: 15px;
background: rgba(100,100,100,0.8);
width:100px;
height:100px;
}
.name{
position: absolute;
bottom: 15px;
margin: 0;
padding: 0 10px 0 0;
background: rgba(255, 255, 255, 0.8);
box-sizing: border-box;
width: 100px;
}
.profile.view .clip{
overflow: initial;
}
.profile.view{
overflow: initial;
}
<div id="profile" class="profile">
<div class="clip">
<img class="img" src="https://i.stack.imgur.com/oiszU.png">
<p class="name">My name is too long for this world..</p>
</div>
</div>
<button id="button1">view all shapes</button>
Draw Circle using css alone [duplicate]
This question already has answers here: How to draw circle in html page? (19 answers) Closed 7 years ago. Is it possible to draw circle using css only which can work on most of the browsers (IE,Mozilla,Safari) ?
Yep, draw a box and give it a border radius that is half the width of the box:
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
}
Working demo:
http://jsfiddle.net/DsW9h/1/
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
}
<div id="circle"></div>
You could use a .before with a content with a unicode symbol for a circle (25CF).
.circle:before {
content: ' \25CF';
font-size: 200px;
}
<span class="circle"></span>
I suggest this as border-radius won't work in IE8 and below (I recognize the fact that the suggestion is a bit mental).
Create a div with a set height and width (so, for a circle, use the same height and width), forming a square
add a border-radius of 50% which will make it circular in shape. (note: no prefix has been required for a long time)
You can then play around with background-color / gradients / (even pseudo elements) to create something like this:
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.sphere {
height: 200px;
width: 200px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
font-size: 500%;
position: relative;
box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
display: inline-block;
margin: 5%;
}
.sphere::after {
background-color: rgba(255, 255, 255, 0.3);
content: '';
height: 45%;
width: 12%;
position: absolute;
top: 4%;
left: 15%;
border-radius: 50%;
transform: rotate(40deg);
}
<div class="sphere red"></div>
<div class="sphere green"></div>
<div class="sphere blue"></div>
<div class="sphere yellow"></div>
<div class="sphere"></div>
border radius is good option, if struggling with old IE versions then try HTML codes • and use css to change color. Output: •
This will work in all browsers
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
yup.. here's my code:
<style>
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue
}
</style>
<div class="circle">
</div>