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/


Login

or Sign Up

Sign Up

or Login
×
tnylea
Cheers Friend!

I'm Tony, the creator of this site. I'm trying to increase my twitter following. Want to follow me?

Follow @tnylea If not, no worries :)