Written By

Dev Dojo

1162 Views

How to create CSS circles

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/

Comments (0)

loading comments