CSS to style old iphone app icon style

Question

I've been Googling this for days, and I just can't find good information that can style the old iPhone app icon using CSS3.

What I've been trying to do is, to style this curved line with CSS3, and if old browser does not support that, it automatically does a fallback to either a straight line, or no line at all.

Please see this image I'm trying to make the CSS for. I would like to make this flexible enough so I can easily replace the words via HTML markup when the text needs to be changed.

Style http://www.beamstyle.com.hk/tmp/sample.png

Thanks in advance!

Thomas

Answer 1

You could try this with a pseudo element and inset box-shadow :

DEMO

HTML :

<div>content</div>

CSS :

div{
    position:relative;
    overflow:hidden;
    border:1px solid #D5BA76;
    border-radius: 10px;
    background:#E0CB91;
    width:200px;
    height:100px;
    box-shadow: inset 0px 50px 100px -50px #fff;

}
div:before{
    content:'';
    height:500px;
    width:500px;
    position:absolute;
    top:50px;
    left:-155px;
    border-radius:50%;
    background:#AF945C;
}