Does anyone know why does my Contact Us sidebar div link has white space between rounded border and gradient?

Vote count:

0

I have a contact us gradient div link on my sidebar with a rounded border. The rounded border isn't right on the edge of the gradient div all the way around. The result is there is white space in between the gradient and the border at the bottom and right side. How do I fix this?

I created a fiddle but it is slightly different in the fiddle. There is no white spaces and the div text has an underline. Check it out for yourself.

The fiddle: http://ift.tt/1sYk6sX

<div id="sidebar">
<p>Any Questions?</p>
<div class="sidebar-butt"><a href="http://ift.tt/1lZdIgW">Contact Us</a></div>
</div>

#sidebar {

    float: right;

    width: 238px;

    color: #000000;

    padding-right: 5px;

    padding-left: 5px;

    height: 250px;

    border: 1px solid #28A9D6;

    border-radius: 8px;

    margin-top: 4px;

    margin-right: 5px;


}
.sidebar-butt {

    background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.27, #496FE3),
    color-stop(1, #121B3E));

    background-image: -o-linear-gradient(bottom, #496FE3 27%, #121B3E 100%);

    background-image: -moz-linear-gradient(bottom, #496FE3 27%, #121B3E 100%);

    background-image: -webkit-linear-gradient(bottom, #496FE3 27%, #121B3E 100%);

    background-image: -ms-linear-gradient(bottom, #496FE3 27%, #121B3E 100%);

    background-image: linear-gradient(to bottom, #496FE3 27%, #121B3E 100%);

    width:110px;

    height:28px;

    color:#fbfbfb !important; 

    border-radius:25px; 

    -webkit-border-radius:25px; 

    -moz-border-radius:25px; 

    border: 1px solid #002799; 

    font: Bold 16px Verdana;

    padding: 5px 10px;

    text-align: center;







}

.sidebar-butt:hover {

    background:linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;

    background: -moz-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0% transparent;

    background: -webkit-linear-gradient(to bottom, #4970E3 0%, #121B3E 100%) repeat scroll 0% 0%    transparent;

    width:110px;

    height:28px;

    color:#fbfbfb; 

    border-radius:25px; 

    -webkit-border-radius:25px; 

    -moz-border-radius:25px; 

    border: 1px solid #002799; 

    font: Bold 16px Verdana;

    background: #060652;

}

.sidebar-butt a {

    color: #fbfbfb;

}

My website: http://ift.tt/1sYk44f

asked 45 secs ago

user3381910

27