Hello friends! Once again welcome to myexamnote. Today we are going to see another CSS tutorial. That is How to create circle by using CSS. We can use circles as background design. For that we have to know how to draw a circle. With this tutorial I am going to teach you how to position them in screen as well. By using this method you also can able to draw half circles and quarter circles easily. Let’s see the code.
Post Outline
- Technologies used
- HTML code for create circle
- CSS code for create circle
- Code explanation
- CSS code for change position
- Conclusion
Technologies used
Firstly we will see what are the technologies we used to create this project. Firstly you have to make sure whether you have these things in your project to create a circle using these code snippset.
- Bootstrap
- CSS
- HTML
- XAMPP Server
- Text Editor
HTML code for create circle
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/styles.css">
<!-- Custom styles for this template-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="scripts/jquery-3.3.1.min.js" ></script>
<script src="scripts/jquery-ui-1.12.1/jquery-ui.js" ></script>
<script src="scripts/popper.min.js" ></script>
<script src="bootstrap-4.1.3/js/bootstrap.min.js" ></script>
<title>Hello, world!</title>
</head>
<body>
<div class="circle">
</div>
</body>
</html>
CSS code for create circle
.circle{
height: 100px;
width: 100px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
background-color: orange;
}
Code explanation
If your need your circle to be a bigger one you can increase the height and width. If you want to create half circles you can make border radius 0 in the relevant points. You can go through clockwise for writing border radius. Firstly top right, bottom right, bottom left, top left. From background color property you can change the color. For positioning the circle anywhere in the screen add property absolute. And also give top, bottom or left, right coordination.
CSS code for change position
.circle{
height: 100px;
width: 100px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
background-color: orange;
position: absolute;
top: 10rem;
left: 10rem;
}
Conclusion
I hope you could understand how to create circles by using CSS from this post. If you like please comment and share. We will meet again with another post. If you interested to learn How to create quarter circle by using CSS. Check that post too. Till then goodbye all.
I am a new to coding. This was very helpful. If you can please guide about How to remove input field border. And also how to customize bootstrap input. Thanks a lot.
Thank you so much
Thanks for the good article, I hope you continue to work as well.
Having read this I believed it was rather enlightening. I appreciate you spending some time and effort to put this article together. I once again find myself personally spending a lot of time both reading and commenting. But so what, it was still worth it!
Thank you so much.
I haven¦t checked in here for some time as I thought it was getting boring, but the last few posts are good quality so I guess I will add you back to my everyday bloglist. You deserve it my friend 🙂
Thank you for your comment. Keep reading us.