Question

I have a label control in tabel cell and with css on hover i have set the top border or red color.PRoblem is that the poistion of top border is showing distance bewtween border as like in my image attached with question

If You see then the red border is not like a square cornered and also showing a blank top space on top of it.I have much tried to remove this but i failed.Please anyone help me to make the border corners equal and also black space should like this second image.In short i want to make border like this image

My css code is bellow

#sddmCA div
{   position: absolute;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background: #444444;
    border: 1px solid #959595;
    border-top-color:#464646;
    margin-top:1cm; 

and label control code is here

<ul id="sddmCA">
<asp:Label ID="CA"   runat="server" Font-Names="Arial" Font-Size="10pt" ForeColor="#CCCCCC" Style="margin-top:auto;" Height="100%" Text="Current Activities"         onmouseover="var b = ChangeColorCA();  hideshow(this);   this.style.cursor='pointer'; boldCA();    return b"                                     onmouseout="var b = mclosetime();   return b;" onclick="var a = mopen('m11'); this.style.background='#464646'; this.style.color='#FFFFFF'; this.style.borderBottomColor ='#464646'; this.style.borderRightColor ='#464646'; this.style.borderLeftColor ='#464646';  return a"  ></asp:Label>&nbsp;&nbsp;

Answer 1

You could either set a black border on the non-hovered state that is the same width as the hovered state, or use a box shadow (depending on which browsers you choose to support)

#sddmCA div /*removed non-question related code*/
{   
    border: 1px solid #959595;
    border-top-color:#000000;
}

#sddmCA div:hover
{   
    border: 1px solid #959595;
    border-top-color:#464646;
}

This will keep it in the same place as the border doesn’t change its size when hovered.