Last Updated: February 25, 2016
·
10.38K
· themusyo

a perfect circle div

put a div in your page and give it equal width and height so it'd be a square.
set the border-radius half of height and width.<br/>
css:
div{
width:100px;
height:100px;
border-radius:50px;
}

4 Responses
Add your response

Even better, you can do border-radius: 50%; so you don't have to change it together with the size.
Worth noting that you have to make sure that the element has the same border and padding on all sides...

over 1 year ago ·

yeah I didn't notice that, tnx;)

over 1 year ago ·

You can also use border-radius: 100%</code>

over 1 year ago ·

@zachthezman Technitally, 50% is actually enough cause one there are two borders on one side of the element.

over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip