css3 - CSS circle mask -

i looking create dark mask @ bottom of circle contained in main circle.

can using css masks?

please see fiddle

<div id="profile-pic-wrap">   <div id="profile-pic">     <div class="profile-btn-bg">       <a href="#" class="profile-pic-btn">change profile</a>     </div>   </div> </div> 

thanks

you can use overflow:hidden; :

demo

changes css : added overflow:hidden; , text-align:center #profile-pic

#profile-pic {  	position: absolute;  	z-index: 999;  	width: 200px;  	height: 200px;  	left: 33px;  	background: #fff;  	border: 3px solid #fff;  	border-radius: 100px;  	-webkit-border-radius: 100px;  	-moz-border-radius: 100px;  	top: 0px;  	position: relative;      background:red;      overflow:hidden;      text-align:center;  }  .profile-btn-bg{  	position: absolute;  	background-color: black;  	width: 100%;  	height: 30%;  	bottom: 0px;  }    a.profile-pic-btn{  	color: #fff;        }

<div id="profile-pic-wrap">    <div id="profile-pic">      <div class="profile-btn-bg">        <a href="#" class="profile-pic-btn">change profile</a>      </div>    </div>  </div>