How to create CSS circles

Updated Jul 17, 2020・1 minute read Post By Dev Dojo
How to create CSS circles

Thanks to CSS3, creating circles couldn't be easier. Let's say that you have a block that is 100 pixels tall and 100 pixels wide. Well, if you gave each of the corners a border radius of 50px it will come out to be a perfect circle. Using the following CSS:

.circle{
    width:100px;
    height:100px;
    border-radius:50px;
    background:#3555AA;
}

And then adding the following Div to your html:

<div class="circle"></div>

Will give you a perfect circle:

You can apply this effect to divs, images, and any other HTML element. Checkout this awesome reference on the multiple shapes of CSS: 

https://css-tricks.com/examples/ShapesOfCSS/

© 2020 DevDojo LLC. All rights reserved.