Rounded Corners Clipping Chilren CSS

by Travis

HTML

<div><span></span>WXYZ</div>


<div><span id="demo"></span>WXYZ</div>

CSS

div { position:relative;
    -moz-border-radius: 45px;
    border-radius: 45px;
    background-color: #ccc;
    font-size: 100px;
    color: #777;
    line-height: 70%;
    overflow: hidden;
    width: 257px;
}
span{ position:absolute;
    border:25px solid #fff;  
    top:-25px;
    left:-25px; 
    -moz-border-radius: 70px;/* 45+25 */
    border-radius: 70px;
    display:block; 
    width:100%;  
    height:100%;
}

#demo{ border-color:#888;}