Create html div as circle using HTML and css

Create the following div on your HTML page as below:

< div id=”circularDiv” class=”circluarDiv” >< /div >

Add the following css in your html file or common css file that you’re importing:

.circluarDiv {
     width: 100px;
     height: 100px;
     background-color: whitesmoke;
     border: 1px solid black;
     border-radius: 50%;
 }

Please note that the width and height should be equal for the div. Keep the border and background colours distinct to easily recognize the element.

The border-radius is giving rounded corners to the Div.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.