border radius rounded corners into parent and child <div>

Question

I have some problem with hover on div, which has border-radius.

When i hover the div there is small line with color that not similar with hover color.

html code:

<div class="grid_veiw_case_active">
    <div> some text</div>

    <div class="delete_div">
        <div class="delete"><p class="button_text"></p></div>
    </div>

</div>

css(part) code:

.grid_veiw_case_active {
   border-style: solid;
   border-width: 1px;
   border-color: #404040;
   border-radius: 5px;
   background: #7d7d7d;  
   width: 254px;
}
.grid_veiw_case_active .delete {
   border-top: 1px solid #969696;
   width: 100%;
   height: 38px;
   -webkit-border-bottom-right-radius: 4px;
   -webkit-border-bottom-left-radius: 4px;
   -moz-border-radius-bottomright: 4px;
   -moz-border-radius-bottomleft: 4px;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
   background: #c1c0c0;

}

.grid_veiw_case_active .delete:hover {
   background: #d06d70;

}

code link http://jsfiddle.net/Xbj3b/ .
image that illustrats problem

Answer 1

Add border-radius: 0px; to your hover state.