Example dinamic circle CSS3

<!DOCTYPE html>
<html>

  <head>
    <style type="text/css">
      .parent {
        width: 50%;
      }
      .circle {
        width: 50px;
        height: 50px;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        overflow: hidden;
        background-color: #000;
      }
      .circle2 {
        width: 5%;
        height: 5%;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        overflow: hidden;
        background-color: #000;
      }
      .circle3 {
        width: 20%;
        padding-bottom: 20%;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        overflow: hidden;
        background-color: #000;
      }
    </style>
  </head>

  <body>
    Example 1
    <div class="parent"><div class="circle"></div></div>
    Example 2
    <div class="parent"><div class="circle2"></div></div>
    Example 3
    <div class="parent"><div class="circle3"></div></div>
  </body>

</html>

// Code goes here

/* Styles go here */