html - border radius rounded corners into parent and child <div> -
i have problem hover on div, has border-radius.
when hover div there small line color not similar hover color.
html code:
<div class="grid_veiw_case_active"> <div> 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 illustrats problem
add border-radius: 0px;
hover state.
Comments
Post a Comment