как граница 180 пикселей с высотой / шириной - > 0px становится кругом с радиусом 180 пикселей?

давайте переформулируем это в два вопроса:

где width и height на самом деле применить?

давайте посмотрим на области типичной коробки (источник):

The height и width применить только к содержимому, если используется правильная модель коробки (нет в режиме совместимости, ни старый Интернет Эксплорер).

где border-radius применить?

The border-radius применяется на границе края. Если нет ни отступа, ни границы, это напрямую повлияет на ваш край контента, что приведет к вашему третьему примеру.

что это значит для нашей границы-радиус/круг?

это означает, что ваши правила CSS приводят к коробке, которая состоит только из границы. Ваши правила гласят, что эта граница должна иметь максимальную ширину 180 пикселей с каждой стороны, в то время как с другой стороны он должен иметь максимальный радиус одинакового размера:

на фото фактическое содержание вашего элемента (маленькая черная точка) действительно не существует. Если вы не применяли никаких border-radius вы бы в конечном итоге с зеленым ящиком. Элемент border-radius дает вам синий круг.

это становится легче понять, если вы примените border-radiusтолько два углы:

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

поскольку в вашем примере размер и радиус для всех углов / границ равны, вы получаете круг.

дополнительные ресурсы

ссылки

• W3C:CSS Backgrounds and Borders Module Level 3 (esp. 5. Закругленные Углы)

демонстрация

• пожалуйста, откройте демо ниже, который показывает, как border-radius влияет на границу (подумайте о внутреннем синем поле как поле содержимого, внутренняя черная граница как граница заполнения, пустое пространство как заполнение и гигантская красная граница как граница). Пересечения между внутренней рамкой и красной рамкой обычно влияют на край содержимого.

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>