border radius将圆角转换为父级和子级<div> </div>

Question

我在div上有一些问题，div有border-radius。

当我将鼠标悬停在div上时，会出现一条小线，其颜色与悬停颜色不相似。

html代码：

<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（部分）代码：

.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;

}

代码链接http://jsfiddle.net/Xbj3b/。
说明问题的图像是

Answer 1

将border-radius: 0px;添加到悬停状态。