Create divs 100% round

Question

I have tried unsuccessfully to create divs 100% but have not gotten round. Does anyone know how to do? I'm using border-radius command and setting the various values mesmacom px and percentage but so far, nothing = / as you do this, create divs 100% round?

possible duplicate of [Easier way to create circle div than using an image?](http://stackoverflow.com/questions/4840736/easier-way-to-create-circle-div-than-using-an-image) — Emond, Aug 25 '13 at 11:57

score 3 · Answer 1 · answered Aug 25 '13 at 12:02

3

Actually, this is a better approach:

.round {
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

Notice the use of a percentage as the border-radius. This way, you can just change the height/width and get bigger/smaller circles.

answered Aug 25 '13 at 12:02

kumarharsh

18,026
7
71
97

score 0 · Answer 2 · edited Aug 29 '16 at 07:06

0

You just make the border-radius half of the width and height.

div { height: 100px;
    width: 100px;
    border-radius: 50px;
}

Working example: http://jsfiddle.net/j7vD7/

edited Aug 29 '16 at 07:06

frogatto

27,475
10
76
119

answered Aug 25 '13 at 11:58

Valency

107
2
8

Create divs 100% round

2 Answers2