Where Has The Border Radius Gone on Mouseover

Question

I'm making a menu selection bar, and I'm running into a problem when I mouse over. The icon's corners should all be curved, but only the left hand side ones are. Here's a demo of the code: https://jsfiddle.net/gfqgcwq5/

From what I can tell, it seems like inline-block is the culprit here:

.wrapper{
    display:inline-block;
    margin:10px;
}

I just don't know how to accomplish the inline array without it. I'm not great at css, so if someone could lend me a hand, I'd appreciate it.

Answer 1

try this one:

.icon{
        border-radius:8px;
        padding-top:15px;
        padding-bottom:5px;
        transition:.1s;
        font-size:60px; 
    display: inline-table;
    }

    .icon:hover{ 
        cursor:pointer;
        background-color: #00B1EB;
        color:#fff;

    }

    span#picture > span {
        padding-right:9px;
        padding-left:10px;
        padding-top:7px;
        padding-bottom:10px;
    }


    .text{
        text-align:center;
    }

    .wrapper{
        display:inline-block;margin:10px;
    }

DEMO HERE

Answer 2

Used to this

Define your .icon display inline-block

as like this

.icon{display:inline-block;line-height:60px;}

or you can used to

.icon{display:block;}

Demo