How to create a circle in CSS3
The creation of a circle in CSS3 is probably easier than you would have assumed. It all starts by creating an HTML element which needs to be called up by the CSS. By means of the CSS an identical width and height needs to be given to the element and a personal background color needs to be chosen. Next you make use of the CSS3 property border-radius. Contrary to inserting values for all the different angles, you are now inserting only one value. This value needs to be exactly half of the value you have previously provided for the width and height. A perfect round circle will be created with CSS3. Please find below the CSS3 example.
.circle {
width: 200px;
height: 200px;
background: yellow;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}
width: 200px;
height: 200px;
background: yellow;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}