Primeiro cole esse código no lugar da tag <html> (ínicio do seu código)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Exemplo de como irá ficar a borda no seu blog ^__^ Copie o código abaixo e cole no seu CSS. Não esqueça de hospedar sua imagem (a que vai ter na borda) e colocar no lugar do imagem.png
O borderimagem: hover é a "segunda" borda, o efeito de quando passar o mouse em cima ~ então use uma imagem diferente da primeira.

.borderimage {
        background-image: url('imagem.png');
        border: 1px solid #a3b9f1;
        padding: 7px;
        margin: 3px;}

.borderimage:hover {
        background-image: url('imagem.png');
        border: 1px solid #FFB3CE;
        padding: 7px;
        margin: 3px;}

Sempre que for usar a borda, acrescente o div class na sua imagem. Por exemplo:

<img src="imagem.gif" class="borderimage">