Este é o CSS:

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

Como ele produz o círculo abaixo?

Suponha que, se a largura do retângulo for de 180 pixels e a altura de 180 pixels, apareceria assim:

Depois de aplicar o raio da borda de 30 pixels, apareceria assim:

O retângulo está ficando menor, ou seja, quase desaparecendo se o tamanho do raio aumentar.

Então, como uma borda de 180 pixels height/width-> 0pxse torna um círculo com um raio de 180 pixels?

Como uma borda de 180 pixels com altura / largura-> 0px se torna um círculo com um raio de 180 pixels?

Vamos reformular isso em duas perguntas:

Onde widthe heightrealmente aplicar?

Vamos dar uma olhada nas áreas de uma caixa típica ( fonte ):

O heighte widthaplica-se apenas ao conteúdo, se o modelo de caixa correto estiver sendo usado (sem modo peculiar, sem Internet Explorer antigo).

Onde se border-radiusaplica?

O border-radiusaplica-se na borda da borda. Se não houver preenchimento nem borda, isso afetará diretamente a borda do conteúdo, o que resultará no seu terceiro exemplo.

O que isso significa para o raio da borda / círculo?

Isso significa que suas regras CSS resultam em uma caixa que consiste apenas de uma borda. Suas regras afirmam que essa borda deve ter uma largura máxima de 180 pixels em todos os lados, enquanto, por outro lado, deve ter um raio máximo do mesmo tamanho:

Na figura, o conteúdo real do seu elemento (o pequeno ponto preto) é realmente inexistente. Se você não aplicou, border-radiusvocê terminaria com a caixa verde. O border-radiuste dá o círculo azul.

Fica mais fácil de entender se você aplicar border-radius apenas os dois cantos :

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

Como no seu exemplo, o tamanho e o raio de todos os cantos / bordas são iguais, você obtém um círculo.

Mais recursos

Referências

• W3C: Módulo CSS Backgrounds and Borders Level 3 (esp. 5. Cantos arredondados )

Manifestações

• Abra a demonstração abaixo, que mostra como isso border-radiusafeta a borda (pense na caixa azul interna como a caixa de conteúdo, a borda preta interna como a borda do preenchimento, o espaço vazio como o preenchimento e a borda vermelha gigante como, bem, fronteira). As interseções entre a caixa interna e a borda vermelha geralmente afetam a borda do conteúdo.

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>

Demo

Vamos examinar a questão de outra maneira com esta demonstração de imagem:

Vamos ver primeiro como o raio da borda é produzido?

Para produzir raio, são necessários dois lados de sua borda. Se você definir o raio da borda para 50 pixels, serão necessários 25 pixels de um lado e 25 pixels de outro lado.

E tirar 25 pixels de cada lado produziria assim:

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

Agora veja quanto pode ser necessário no máximo quadrado para aplicar em um canto?

Pode levar até 180 pixels da parte superior e 180 pixels da direita. Então produziria assim:

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

E veja isso como ele produz se definirmos um valor diferente de raio?

Suponha que, se você aplicar o raio da borda apenas a dois cantos de maneira desigual:

• canto superior direito a 180 pixels

• canto inferior direito a 100 pixels

Então levaria

• canto superior direito: 90 pixels da parte superior e 90 pixels da direita

• canto inferior direito: 50 pixels da direita e 50 pixels da parte inferior

Então produziria assim

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

Quanto máximo de sua borda pode ser necessário para aplicar em todos os lados? E veja como isso produz um círculo?

Pode levar até metade do tamanho da borda, ou seja, 180 pixels / 2 = 90 pixels. Então produziria um círculo como este

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

Por que leva apenas metade do quadrado para aplicar em todos os lados?

Porque todos os cantos precisam definir o valor do raio igualmente.

Tomando partes iguais de sua borda, produz um círculo.

Bordas são a caixa externa de qualquer conteúdo e, se você aplicar um raio, simplesmente produzirá a borda circular.

Eu acho que ele inicialmente cria um retângulo com height and width = 180pxe depois faz uma curva com um raio específico, como 30pxem cada canto. Por isso, define bordercom dado radius.

Ambos .ae.b dará a saída idêntica.

Q. Por que eu usei width: 360px; height: 360px; ?

A. border: 180px solid red;em .atrabalhos comoborder-width: 180px 180px 180px 180px; /* Top Right Bottom Left */ .

Espero que este violino ajude você a entender o conceito.

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