Box shadow as radius

Trying out a bit of box shadow for double borders and stuff

by Vaibhav Deshwal

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/flatly/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<i class="fa fa-star fa-custom fa-shadow"></i>

CSS

body, html {
    height: 100%;
}
body  {
    background-color: #ecf0f1;
}
.fa-custom {
    position: absolute;
    top: 40%;
    left: 40%;
    text decortion: none;
    display: inline-block;
    font-size: 8em;
    height: 2em;
    width: 2em;
    text-align: center;
    vetical-align: bottom;
    line-height: 2em;
    color: white;
    background-color: #e74c3c;
}
.fa-shadow{
    border-radius: 0.2em;
    box-shadow: 0 0 0 3px #bdc3c7, 0 0 0 4px #95a5a6; 
}