Bordes superior e inferior con imágenes - lista de sugerencias de un autocomplete.

[Kalimdor]

Hola.

En la lista resultante de un "autocomplete" quiero que, al inicio y final de la misma, aparezca una imagen que me haga los bordes superior e inferior de la lista dinámica de sugerencias.

Dicho de otro modo: No estoy usando la propiedad CSS border: 1px solid #000000, sino que estoy reemplazando los bordes por imágenes.
Ya lo logré a los lados izquierdo y derecho con la propiedad background, pero no lo he podido hacer para la parte superior e inferior de la lista dinámica de sugerencias.

Este es el código:

Código:

    $.ajax({
        type: "GET",
        url: "demo.xml",
        dataType: "xml",
        success: parseXml,
        complete: suggestDir,
        failure: function(data) {
            alert("No se encuentra el directorio");
        }
    });
 
    function parseXml(xml) {
        $(xml).find("Contacto").each(function() {
            dirArray.push($(this).find("Nombre").text() + ' ' + $(this).find("Apellido").text());
        });
    }
 
    function suggestDir() {
        $("#search_box1").autocomplete({
            source: dirArray,
            minLength: 2,
            select: function(event, ui) {
                $("#search_box1").val(ui.item.value);
                $("#search_form1").submit();
            }
        });
    }
});

Este código me realiza el trabajo del autocomplete y con CSS puse una imagen, background, que me brinda los bordes izquierdo y derecho.

¿Cómo puedo colocar los bordes superior e inferior?

Gracias.