How to make a circular div with HTML/CSS

firstaeon(32)
Published in
#html
Words
50
Reading
1 min
8y
Listen to this post
~1 min

Coding-aeon.png

There is a very simple way to have perfectly rounded divs in HTML 4 and 5.
by setting border-radius: 50% you will round the corners of the square div to turn them exactly to arches.

<style>
    .round {
        border-radius: 50%;
        background-color: red;
height: 100px;
width: 100px;
    }
</style>

<html>
    <body>
            <div class="round"></div>
    </body>
</html>

image.png

Check it out: https://jsfiddle.net/cy108nbv/1/

Thank you! Stay tuned for more coding tips, tricks and much more!

resh aquasummit.png