0

How does this CSS produce a circle exactly applying the half of equal width/height?

div{
    width: 200px; 
    height: 200px; 
    border-radius: 100px; 
    background-color: red;
}

Circle with CSS

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
luxi
  • 317
  • 1
  • 4
  • 17
  • 1
    It's a square with round corners. 4 round corners which just touch = a circle – Dave Apr 28 '13 at 09:43
  • A clear demonstration of no research effort whatsoever. Simply mocking it up and tweaking the values would show you how this works. – Sparky Apr 29 '13 at 03:37

2 Answers2

1

Read this explanation and everything will be clear :)

How it Works

Rounder corners can be created independently using the four individual border-*-radius properties (border-bottom-left-radius, border-top-left-radius, etc.) or for all four corners simultaneously using the border-radius shorthand property.

Community
  • 1
  • 1
  • 1
    Summarise the explanation in your answer, otherwise the answer becomes useless when (rarely 'if') that link dies. – David Thomas Apr 28 '13 at 09:43
1

It is because of your border-radius. You set it to be 100 pixels which is exactly half of the original square, so it will turn it into a circle. Try doing:

div{
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background-color: red;
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
sbru
  • 877
  • 6
  • 21
  • 36