I this article I would like to share with you a sample CSS codes that will create a circle. CSS or Cascading Style Sheet is very basic and fundamentals to learn if you want to learn web development. The CSS tags are very short and easy to understand I hope you will learn from this. Thank you.
My email address are the following jakerpomperada@gmail.com and jakerpomperada@yahoo.com.
My mobile number here in the Philippines is 09173084360.
Sample Web Page Output
Source Code Listing
<html>
<head>
<title>
Circles Demo in CSS
</title>
<meta charset="utf-8">
</head>
<style>
.circle_orange {
width: 47px;
height: 47px;
border-radius: 50%;
background-color: #f58025;
border: solid 0.5px #e0e0e0;
}
.layer_circle1 {
object-fit: contain;
font-family: HiraKakuPro-W3;
font-size: 12px;
font-weight:bold;
line-height: 3.67;
text-align: center;
color: #ffffff;
}
.circle_gray {
width: 47px;
height: 47px;
border-radius: 50%;
background-color: lightgray;
border: solid 0.5px #e0e0e0;
}
.layer_circle2 {
object-fit: contain;
font-family: HiraKakuPro-W3;
font-size: 12px;
font-weight:bold;
line-height: 3.67;
text-align: center;
color: gray;
}
</style>
<body>
<div class="circle_orange layer_circle1">
Demo
</div>
<br>
<div class="circle_gray layer_circle2">
Test</div>
</body>
</html>
