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 override a *{list style:none} property

    How to underline button text (using CSS) when mouse pointer is over the button?

    How to vertically center div in floated div?

    How to use image tag in body of html instead of loading image from css?

    How to make a responsive div stick to page edge

    Difference in css position IE/FF, how to solv my problem?

    How can I “hack” the Thunderbird Lightning extension to fully color categories

    how i can show the image in middle of div i want using CSS

    How to always show up pure HTML5/CSS modal window without clicking a link which activates it?

    How can I be sure that a website is responsive by only looking the code?

    CSS: How to limit horizontal/vertical scrolling?

    How to make a div to fit all available width even hidden with scroll?

    How to set image height 90 % of whole page height (not viewport)

    Show/hide (fade in/out) several DIVS inside table row with several A HREF in other row and columns

    How to hyperlink CSS-made images? [closed]

    How combine multiple media destinations (screen, print) with width restriction?

    How to hightlight non editable backgrid cells?

    I want to override some CSS that says border:none to have border bottom. How can I do this?

    How to Work Jquery Rating Stars Using in Java Application?

    How to change order of elements inside tables?

    grayscale - how to disable it automatically

    How to remove border-bottom of last div in a group - CSS

    How to code vertical banner

    How to get actual (not original) height of a CSS-rotated element

    How to make text slide by only using css/html

    Inline blocks somehow don't get displayed in a straight line [duplicate]

    How to make one css input type be displayed the same as another input type

    how create triangle using css [duplicate]

    How to modify this CSS based Accordion to work with multiple accordions on the same page?

    How to add background image to only one page in Jade