Sidebar com bordas Hover

Yo! Minhas panquecas ohh panquecas...rs Hoje eu trago um tutu que meio que me virei em arrumar, então se usarem creditem ok? Eu acabei estraguei o novo layout tentando arrumar esse bagulho doido, então por isso da demora em arrumar o blog, mas consegui criar uma sidebar em efeito hover!!! Weeeee Caso queiram saber como se faz  basta continuar lendo a postagem.

Vá ate seu HTML então use o atalho Ctrl+F para procura esse trechinho:

/* Widgets

Abaixo dele vai aparecer esse codigo:

.sidebar .widget {

Então abaixo dele adicione esse codigo, detalhe se você já tiver uma sidebar personalizada remova ela antes e então coloque esse codigo:

Códigos

background: #CorDoFundo;
font-family: calibri; /*FONTE*/
font-size: 10px; /*Tamanho da fonte*/
color: #CorDaFonte;padding: 10px; /*Não modifique aqui*/
border: 10px solid #CorDaBorda; /*BORDA*/border-radius: 5px 50px 5px 50px; /*Bordas arredondadas*/ -webkit-transition-duration: 1.50s; /*duração da transição*/ }

.sidebar .widget:hover {background:#FUNDO HOVER;border: 10px solid #BORDA HOVER ;border-radius: 50px 5px 50px  5px; /*Bordas arredondadas*/}

Agora se quiser uma sidebar mais personalizada igual a minha, use esse codigo e altere as cores, eu não arrumei o título apenas personalizei a sidebar:

Códigos

background: #fff;font-family: calibri; /*FONTE*/
color: #fff;
padding: 10px; /*Não modifique aqui*/
border-top: 5px solid #COR DA BORDA NORMAL;
border-bottom: 5px solid #COR DA BORDA NORMAL;
box-shadow: inset 0 0 15px #E3E3E6, 0 0 3px #ccc;
-webkit-transition-duration: 1.50s; /*duração da transição*/ }

.sidebar .widget:hover {
background:#fff;
border-top: 5px solid #COR DA BORDA HOVER;
border-bottom: 5px solid #COR DA BORDA NORMAL HOVER;
box-shadow: inset 0 0 15px #D2D2D2, 0 0 3px #ccc;
}