Creating Circles with CSS & HTML
There are some details in CSS which are not obvious to implement. One of these is the creation of circles. Here is a short receipe for CSS circles.
It’s easy to create a box in CSS. But what about a circle? Ok, we can create a graphic for this, but the good news is that it is as simple as a box in CSS. Our result will look like the graphic below.
First we create a simple HTML structure consisting of a div with a class="circle".
<div class="circle">
This is a div circle with text.
</div>
The next step is to give the circle class a width and height in a style. Then we give the box a border. Don’t forget to set the border style to solid. Otherwise nothing happens. Add a text alignment and padding. And now the magic step: Simply set the border radius to a value greater than width/height divided by two. In our case this is 100px. The padding makes the box bigger since it is added to this size. Therefore our box is 120px * 120px. When we set the border-radius to 70px we get a circle. Here is the full code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Circle</title>
<style>
.circle{
width: 100px;
height: 100px;
border: 1px;
border-style: solid;
text-align: center;
padding: 20px;
border-radius: 70px;
border-color: #5c8ce2;
background-color: #5c8ce2;
}
</style>
</head>
<body>
<div class="circle">
This is a div circle with text.
</div>
</body>
</html>
Words: 300 | Reading Time: 2 min