yfccow
Last Updated: February 25, 2016
·
1.898K
· themusyo
10684317 693196797432883 114022871 n

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;
}

Say Thanks
Respond

4 Responses
Add your response

3372
D42a7264714dee5006b9c99d2567a320

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 ·
3374
10684317 693196797432883 114022871 n

yeah I didn't notice that, tnx;)

over 1 year ago ·
3404
Bfb4833e40676616e28300a0b9f55d35

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

over 1 year ago ·
3741
D42a7264714dee5006b9c99d2567a320

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

over 1 year ago ·