EN
CSS - circle div
3 points
In this article, we would like to show you how to make circle div in CSS.
Quick solution:
xxxxxxxxxx1
.circle{2
border-radius: 50%;3
}To make a simple circle element we need to create a style with border-radius property set to 50% and attach it to our <div> element.
Runnable example:
xxxxxxxxxx1
<html>2
<head>3
<style>4
5
.circle1 {6
background: red;7
border-radius: 50%; /* <-------- required */8
width: 50px;9
height: 50px;10
display: inline-block;11
}12
13
</style>14
</head>15
<body>16
<div class="circle1"></div>17
</body>18
</html>In below example, once again we use border-radius property set to 50% to make our elements round. Then we use various border properties to style our circles.
Runnable example:
xxxxxxxxxx1
<html>2
<head>3
<style>4
5
.circle2 {6
background: yellow;7
border-radius: 50%; /* <-------- required */8
border: solid;9
border-color: red;10
width: 60px;11
height: 60px;12
display: inline-block;13
}14
15
.circle3 {16
background: lightgreen;17
border-radius: 50%; /* <-------- required */18
border: double;19
border-color: blue;20
border-width: 8px;21
width: 70px;22
height: 70px;23
display: inline-block;24
}25
26
</style>27
</head>28
<body>29
<div class="circle2"></div>30
<div class="circle3"></div>31
</body>32
</html>Note:
Here you can find more informations about CSS border property.
