Connect with us!
Creating Circle using HTML and Width and Height CSS
Circle is created by rounded borders of the element. Circle is a basic shape and is super simple to create using HTML and CSS. In this article we will learn about using border radius.
CSS Properties Definitions
The CSS width property specifies the width of the element.
The CSS height property specifies the height of the element.
The background property specifies the background of the element.
the border-radius property specifies the border.
Code Block
Here is the code for creating the circle:
.circle {
width: 100px;
height: 100px;
background: #99d3ff;
border-radius: 50%;
}Circle is created but equal width and height a background color is specified and a border-radius of fifty percent is added.
And, here is the output:
Video Tutorial
You can find the complete coding tutorial in the following YouTube Video
Here is the complete tutorial code for HTML and CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.circle {
width: 100px;
height: 100px;
background: #99d3ff;
border-radius: 50%;
}
</style>
<title>Salow Studios</title>
</head>
<body>
<h1>Circle</h1>
<div class="circle"></div>
</body>
</html>Thank you for reading. I hope that it has helped you with your project. Good luck and happy coding!
