Nested div masked off by circular container div

Question

I'm trying to figure out if there's a way to do this with CSS: I have a container div with a border-radius of 50% (circular). Inside of that is a rectangular div with a height of 30% positioned at the bottom of the container, and I want to be able to mask that off so that anything outside of the container's rounded border radius doesn't show. How do I accomplish this? Attached is a screenshot of what's currently happening, and this is my code:

<div id="coupon_container">
  <div id="meter_container">50c off</div>
</div>

#coupon_container {
    position: fixed; right:0; top:0; z-index: 100; color: #fff; width:170px; height: 120px; 
    #meter_container { 
        position: absolute; width: 110px; height:110px; .round; background: @greenDk; border:5px solid #fff; left: 60px; overflow: hidden; 
        .meter_level { width: 100%; height:30%; position: absolute; bottom:0; text-align: center; font-size: 1.6em; background: @limeLt; } 
    }
}

Answer 1

I really like the gradient solution that bookcasey has posted. However, compatibility may be a drawback as IE9 doesn't support CSS gradients. So another solution would be this one:

demo

The idea is to use a top padding of 70% instead of absolute positioning.

HTML:

<div id="coupon_container">
    <div id="meter_container">50c off</div>
</div>

CSS:

#coupon_container {
    overflow: hidden;
    width: 8em; height: 8em;
    border-radius: 50%;
    background: green;
}
#meter_container { 
    margin: 70% 0;
    height: 30%;
    text-align: center;
    background: lime;
}