Como colocar a separação do gadget em hover.

Olá pessoal ^^
Trouxe um tutorial muito legal.É como colocar a separação de gadgets com um risquinho de efeito hover na separação do gadget!Muito legal!
Vamos aprender?


                               Vá em Painel> modelo> Editar HTML > Procure por:

]]></b:skin> 

                                                   Acima desse código cole esse abaixo:

/**Sidebar Baby: By The baby**/
.sidebar .widget {
width:100% !important;
background:#fff; /* Background do gadget */
margin:10px 0 !important;
border-bottom:5px #b0e2ff solid; /* cor da separação quando não se passa o mouse */
text-align: center;
border-radius:0 0 10px 10px;
padding:10px;
overflow:hidden
}
.sidebar .widget:hover {
background:     #fff;  /* Background do gadget */
width: 100% !important;
border: 0px dotted  #bebebe; */Cor da separação quando passa o mouse /*
text-align: center;
border-radius:0 0 10px 10px;
padding: 10px;
margin:10px 0 !important;
border-bottom: 5px solid #bebebe;  */Cor da separação quando passa o mouse /*
}

                                       Visualizem, se estiver tudo certo salvem!

Abraços,Sááh!

O código foi feito pelo The Baby,mas eu dei algumas modificadas (as coordenadas do que fazer)