How does this CSS produce a circle?


Tags: html,css,css-shapes

Problem :

This is the CSS:

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

How does it produce the circle below?

Enter image description here

Suppose, if a rectangle width is 180 pixels and height is 180 pixels then it would appear like this:

Enter image description here

After applying border-radius 30 pixels it would appear like this:

Enter image description here

The rectangle is becoming smaller, that is, almost going to disappear if the radius size increases.

So, how does a border of 180 pixels with height/width-> 0px become a circle with a radius of 180 pixels?



Solution :

How does a border of 180 pixels with height/width-> 0px become a circle with a radius of 180 pixels?

Let's reformulate that into two questions:

Where do width and height actually apply?

Let's have a look at the areas of a typical box (source):

W3C: Areas of a typical box

The height and width apply only on content, if the correct box model is being used (no quirks mode, no old Internet Explorer).

Where does border-radius apply?

The border-radius applies on the border-edge. If there is neither padding nor border it will directly affect your content edge, which results in your third example.

What does this mean for our border-radius/circle?

This means that your CSS rules result in a box that only consists of a border. Your rules state that this border should have a maximum width of 180 pixels on every side, while on the other hand it should have a maximum radius of the same size:

Example image

In the picture, the actual content of your element (the little black dot) is really non-existent. If you didn't apply any border-radius you would end up with the green box. The border-radius gives you the blue circle.

It gets easier to understand if you apply the border-radius only to two corners:

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

Border only applied on two corners

Since in your example the size and radius for all corners/borders are equal you get a circle.

Further resources

References

Demonstrations

  • Please open the demo below, which shows how the border-radius affects the border (think of the inner blue box as the content box, the inner black border as the padding border, the empty space as the padding and the giant red border as the, well, border). Intersections between the inner box and the red border would usually affect the content edge.

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>


    CSS Howto..

    How to: Reduce font-size if a line breaks

    How to slide a DIV on link click

    How to get use the functionality same as “-webkit-appearance” in firefox?

    How do I trigger the popup dialog box automatically from iWebkit?

    How to use CSS to style the results of a PHP echo?

    How to center a ul CSS

    How can I hide a div when content is not displayed

    How does localStorage act in Javascript? [closed]

    how to have css affect other divs in the same container

    How to use a sprite for a background on a div, positioning to a part of the sprite to the right of the div

    How to add a background to a boostrap grid row (including padding!)?

    How to conditionally adjust paddings using css only?

    How to make custom layout grids more semantic? [closed]

    How do I fix this alignment issue in jQuery & CSS?

    jQuery - Navbar hover did not show

    How can i scroll to specific ID using Header?

    How to separate a table cell into two equal parts with different background via css?

    How to keep nav menu highlighted after click using js in sidebar

    jquery: how to change properties of whole css-class? [duplicate]

    How to create slanted tabs with a border in CSS? [duplicate]

    How to read CSS properties of elements dynamically loaded with external script on Android browser?

    How to keep long image within background cover at any screen size in CSS?

    How to theorize about this phenomenon about
    tag

    how can tell element to get specified styles?

    How to override HTML with CSS

    How to get the initial value of style properties in javascript? [duplicate]

    How to make an element with background image appear using css animation/javascript

    How to right and left align every alternate list item in html and css along with the bullets

    html web shows header only in mobile view

    How can I remove a bootstrap buttons hover effect?