title: CSS/HTML/any alternatives to border-radius OR overflow:hidden?
body: <p>I'm currently working on a project that involves a circle being randomly filled with a color to a certain point. I used a div with border-radius to create the circle + <code>overflow:hidden</code> and another div to imitate the 'filling'.</p>
  
  <p><a href="http://jsfiddle.net/05dkfoxj/" rel="nofollow">See JSFiddle</a> </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="circleswrap"&gt;           
  
      &lt;div class="circlediv"&gt;
          &lt;div class="circle"&gt;
              &lt;div id="animateddiv1"&gt;                         
              &lt;/div&gt;      
          &lt;/div&gt;
      &lt;/div&gt;      
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .circle {
              position: relative;
              border-radius: 50%;
              -o-border-radius: 50%;
              overflow: hidden;
              background: #8a8a8a;
              width: 165px;
              height: 165px;
              display: inline-block;
              margin: 0 75px;.
      }
  
      #animateddiv1 {
              background: #63B23A;
              position: absolute;
              top: 130px;
              width: 200px;
              height: 165px
      }
  </code></pre>
  
  <p>Awesome works great in my browsers BUT i have to get it to work on a outdated Opera browser which is integrated into a smart display monitor (and practically un-updateable).</p>
  
  <p>As we all know the older versions of Opera did not support the combination of border-radius + overflow:hidden + position: relative/absolute</p>
  
  <p><strong>PS: I Know -o-border-radius is not a 'thing' but  i tried it nontheless... a man can always dream :^)</strong></p>
  
  <p>I've been trying to find a solution but i'm out of ideas.</p>
  
  <p>I hope this wonderful community can help me out :)</p>