Error with border Radius Chrome

Question

I have the following structure using the bootstrap and fontawesome

.social-rodape{
    margin-top: 35px;
}

.social-rodape ul li a {
    padding: 10px 12px;
    border-width: 0;
    color: #37a8ab;
    font-size: 30px;
}
.social-rodape ul li:hover a{
    background-color: #37a8ab;
    color: #fff;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<section class="container">
 <div class="col-md-4 col-md-offset-1 col-sm-4 col-sm-offset-1 col-xs-12 social-rodape">
                <ul class="list-unstyled list-inline">
                    <li><a href="#" class="img-circle"><i class="fa fa-facebook-square"></i></a>
                    </li>
                    <li><a href="#" class="img-circle"><i class="fa fa-instagram"></i></a>
                    </li>
                    <li><a href="#" class="img-circle"><i class="fa fa-twitter"></i></a>
                    </li>
                    <li><a href="#" class="img-circle"><i class="fa fa-google-plus"></i></a>
                    </li>
                    <li><a href="#" class="img-circle"><i class="fa fa-youtube"></i></a>
                    </li>
                </ul>
            </div>
            <!--col-md-4 col-sm-4 col-xs-12 social-rodape-->
</section>

But hoping there was a circle when passing the mouse over the icons stays this way:

This only occurs in Google Chrome other browsers like Internet Explorer and Firefox are normal.

Does anyone know how to solve this problem?

Answer 1

Try to put display:inline-block.

.social-rodape ul li a {
    padding: 10px 12px;
    border-width: 0;
    color: #37a8ab;
    font-size: 30px;
    display: inline-block
}