Imágenes en Fondo (fondo y en bordes) en menú desplegable

[HenryPintoC]

Hola a todos, solo soy un simple mortal aficionado y por ende muy ignorante.

tengo un blog con un menú desplegable, pero no se como hacer en CSS para que los bordes sean una imagen de fondo. Logre ponerle una imagen como fondo en general, pero me gustaría que los bordes también lo tuviesen.
¿En que sentido?... quisiera que tuviese (al menos lo mas parecido) el siguiente aspecto cada "botón":


Pero si coloco esa imagen no se adecua al tamaño de las letras, así que agregue la siguiente como fondo en general:


y como bordes aun no hallo como colocarle las siguientes:

Borde Derch:

Borde Izq:

si pueden ayudarme se los agradezco: les copio el codigo CSS del menú:

Código CSS:

/* Menú horizontal con subpestañas en dos columnas
----------------------------------------------- */
#toppic {
width:780px; /* Ancho del menú */
height:40px; /* Alto del menú */
background-image: -moz-linear-gradient(top, #FFD700, #FFD700);
background-image: url(https://1.bp.blogspot.com/-1zDdAFw97Ag/VvqmBt4y8mI/AAAAAAAACRU/pEssMmrxkbQPuZQqDRPgZaj8HwwV6xVjQ/s1600/button_hover.png);
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFD700,endColorStr=#FFD700);
border-bottom:0px solid #FFA500;
border-top:0px solid #FFA500;
margin:0 auto;padding:0 auto;
overflow:hidden;
text-shadow:1px 1px 2px #002851;
}
#topwrapper {
width:780px; /* Ancho del menú */
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#top {width:100%;}
#top, #top ul {padding: 0;margin: 0;list-style: none;}
#top a {
border-right: 1px solid #DAA520; 
border-left: 1px solid #DAA520;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#DAA520; /* Color del texto de las pestañas */
}
#top a:hover {
background: none; /* Color de las pestañas al pasar el cursor */
color:#FFD700; /* Color del texto de las pestañas al pasar el cursor */
}
#top a.trigger {
/* Flecha */
background-image: url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif); 
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {float: left;position: relative;}
#top li {position: static !important; width: auto;}
#top li ul, #top ul li {width:300px;} /* Ancho del contenedor de las subpestañas */
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#00008B; /* Color de fondo del contenedor de las subpestañas */
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px; /* Ancho de cada subpestaña */
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {display: block;}
#top li:hover ul a, #top li.hvr ul a {
color:#DAA520; /* Color del texto de los submenús */
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#FFFF00 !important; /* Color del texto de los submenús al pasar el cursor */
}
 

Les dejo el blog por si quieren ver: [URL="http://shakesandfidgethispano.blogspot.com/"]S&F Hispano[/URL]

He intentado hasta los momentos, pero los bordes (el derech) aparecen acumulados en el 1er "boton". Por ello les pido ayuda.