CSS element box-shadow issue

Question

Box shadow shows a little border inside the element

.green{
    background-color: #fff;
    border: 10px solid lightgray;
    border-radius: 100px;
    box-shadow: inset 0 0 0 1px lightgray;
    cursor: pointer;
    height: 50px;
    position: relative;
    transition: border .25s .15s, box-shadow .4s .3s, padding .25s;
    width: 150px;
    vertical-align: top;
    position: absolute;
}

.green.checked{
    border-color: #70c7c2;
    box-shadow: inset 0 0 0 25px #70c7c2;
    transition: border .25s, box-shadow .25s, padding .25s .15s;
}

www.jsfiddle.net/7uThf

Answer 1

GCyrillus: you can try hiding it using the same color in background

Here is the way, how to postpone background changes which do not interfere with other animations

.green{
    transition: background-color 0 .3s;
    /* changes background back to white before box-shadow animated */
}
.green.checked{
    background-color: #70c7c2;
    transition: background-color 0 .25s;
    /* changes background to green after border & box-shadow animated */
}

Answer 2

It is a default with radius, you can try hidding it using the same color in background: DEMO

.green.checked{
    border-color: #70c7c2;
    background-color: #70c7c2;
    box-shadow: inset 0 0 0 25px #70c7c2;
    transition: border .25s, box-shadow .25s, padding .25s .15s;
}

You may as well use a pseudo element, a little smaller that inherits border and shadow of parent : DEMO

.green:after, .green.checked:after {
    content:'';
    position:absolute;
    top:-9px;
    right:-9px;
    bottom:-9px;
    left:-9px;
    border:inherit;
    box-shadow:inherit;
    border-radius:inherit;