Este es el CSS:

div {
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}

¿Cómo produce el círculo de abajo?

Supongamos que si el ancho de un rectángulo es de 180 píxeles y la altura es de 180 píxeles, entonces se vería así:

Después de aplicar un radio de borde de 30 píxeles, se vería así:

El rectángulo se está volviendo más pequeño, es decir, casi desaparecerá si aumenta el tamaño del radio.

Entonces, ¿cómo un borde de 180 píxeles se height/width-> 0pxconvierte en un círculo con un radio de 180 píxeles?

¿Cómo se convierte un borde de 180 píxeles con alto / ancho-> 0px en un círculo con un radio de 180 píxeles?

Reformulemos eso en dos preguntas:

¿Dónde aplicar widthy en heightrealidad aplicar?

Echemos un vistazo a las áreas de un cuadro típico ( fuente ):

El heighty widthse aplican sólo en el contenido, si el modelo de caja correcta está siendo utilizado (sin modo de peculiaridades, sin antigua de Internet Explorer).

¿Dónde se border-radiusaplica?

El se border-radiusaplica en el borde del borde. Si no hay relleno ni borde, afectará directamente su borde de contenido, lo que resulta en su tercer ejemplo.

¿Qué significa esto para nuestro radio / círculo fronterizo?

Esto significa que sus reglas CSS dan como resultado un cuadro que solo consta de un borde. Sus reglas establecen que este borde debe tener un ancho máximo de 180 píxeles en cada lado, mientras que, por otro lado, debe tener un radio máximo del mismo tamaño:

En la imagen, el contenido real de su elemento (el pequeño punto negro) es realmente inexistente. Si no aplicaste ninguno border-radius, terminarías con el cuadro verde. El border-radiuste da el círculo azul.

Se vuelve más fácil de entender si aplicas el border-radius único a dos esquinas :

#silly-circle{
    width:0; height:0;
    border: 180px solid red;
    border-top-left-radius: 180px;
    border-top-right-radius: 180px;
}

Como en su ejemplo el tamaño y el radio de todas las esquinas / bordes son iguales, se obtiene un círculo.

Recursos adicionales

Referencias

• W3C: Módulo de fondos y bordes CSS Nivel 3 (especialmente 5. Esquinas redondeadas )

Manifestaciones

• Abra la demostración a continuación, que muestra cómo border-radiusafecta el borde (piense en el cuadro azul interno como el cuadro de contenido, el borde negro interno como el borde del relleno, el espacio vacío como el relleno y el borde rojo gigante como, bueno, frontera). Las intersecciones entre el cuadro interior y el borde rojo generalmente afectarían el borde del contenido.

var all = $('#TopLeft, #TopRight, #BottomRight, #BottomLeft');

all.on('change keyup', function() {
  $('#box').css('border' + this.id + 'Radius', (this.value || 0) + "%");
  $('#' + this.id + 'Text').val(this.value + "%");
});

$('#total').on('change keyup', function() {
  $('#box').css('borderRadius', (this.value || 0) + "%");
  $('#' + this.id + 'Text').val(this.value + "%");
  all.val(this.value);
  all.each(function(){$('#' + this.id + 'Text').val(this.value + "%");})
});

#box {
  margin:auto;
  width: 32px;
  height: 32px;
  border: 100px solid red;
  padding: 32px;
  transition: border-radius 1s ease;
  -moz-transition: border-radius 1s ease;
  -webkit-transition: border-radius 1s ease;
  -o-transition: border-radius 1s ease;
  -ms-transition: border-radius 1s ease;
}
#chooser{margin:auto;}
#innerBox {
  width: 100%;
  height: 100%;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <div id="innerBox"></div>
</div>
<table id="chooser">    
  <tr>
    <td><label for="total">Total</label></td>
    <td><input id="total" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="totalText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="TopLeft">Top-Left</label></td>
    <td><input id="TopLeft" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="TopLeftText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="TopRight">Top right</label></td>
    <td><input id="TopRight" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="TopRightText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="BottomRight">Bottom right</label></td>
    <td><input id="BottomRight" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="BottomRightText" value="0" type="text" /></td>
  </tr>
  <tr>
    <td><label for="BottomLeft">Bottom left</label></td>
    <td><input id="BottomLeft" value="0" type="range" min="0" max="100" step="1" /></td>
    <td><input readonly id="BottomLeftText" value="0" type="text" /></td>
  </tr>
  <caption><code>border-radius</code> values. All values are in percent.</caption>
</table>
<p>This demo uses a box with a <code>width/height</code> of 32px, a <code>padding</code> of 32px, and a <code>border</code> of 100px.</p>

Manifestación

Examinemos la pregunta de otra manera con esta demostración de imagen:

Veamos primero cómo se produce el radio del borde.

Para producir el radio se necesitan dos lados de su borde. Si establece el radio del borde en 50 píxeles, se necesitarían 25 píxeles de un lado y 25 píxeles del otro lado.

Y tomando 25 píxeles de cada lado produciría así:

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 50px 0 0;
}

¿Ahora ve cuánto puede tomar el máximo de cuadrado para aplicar en una esquina?

Puede tomar hasta 180 píxeles desde la parte superior y 180 píxeles desde la derecha. Entonces produciría así:

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 180px 0 0;
}

Y mira esto, ¿cómo se produce si establecemos un valor de radio no igual?

Supongamos que si aplica el radio del borde solo a dos esquinas de manera desigual:

• esquina superior derecha a 180 píxeles

• esquina inferior derecha a 100 píxeles

Entonces tomaría

• arriba a la derecha: 90 píxeles desde la parte superior y 90 píxeles desde la derecha

• abajo a la derecha: 50 píxeles desde la derecha y 50 píxeles desde la parte inferior

Entonces produciría así

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 0 180px 100px 0;
}

¿Cuánto máximo de su borde puede tomar del cuadrado para aplicar en todos los lados? ¿Y ves cómo produce un círculo?

Puede ocupar hasta la mitad del tamaño del borde, es decir, 180 píxeles / 2 = 90 píxeles. Entonces produciría un círculo como este

div{
    width: 0px;
    height: 0px;
    border: 180px solid red;
    border-radius: 180px;
}

¿Por qué solo se necesita la mitad del cuadrado para aplicar en todos los lados?

Porque todas las esquinas tienen que establecer su valor de radio por igual.

Tomando partes iguales de su borde, produce un círculo.

Los bordes son el cuadro exterior de cualquier contenido y si aplicas el radio sobre él, simplemente producirá el borde circular.

Creo que inicialmente crea un rectángulo con height and width = 180pxy luego hace una curva con un radio dado como 30pxen cada esquina. Entonces se establece bordercon dado radius.

Ambos .ay .bdarán el mismo resultado.

P. ¿Por qué lo usé width: 360px; height: 360px;?

A. border: 180px solid red;en .aobras como border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */.

Espero que este violín te ayude a entender el concepto.

.a{
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}
.b{
    background:red;
    width: 360px;
    height: 360px;
    border-radius: 180px;
}