Check if there is an email with Ajax

I have a simple registration form, where I want to highlight the mail input in red when I check in the DB that there is already a user with that email.

HTML code:

<form method="post" action="altaUsuario.php">
    <br><label>* Nombre: </label>
    <input type="text" id="nombre" name="nombre" size="15" onblur=comprobarNombre();>
    &nbsp;
    <label>* Apellidos: </label>
    <input type="text" id="apellidos" name="apellidos" onblur=comprobarApellidos();><br><br>
    <label>Tipo de documentacion: </label>
    <select id="selectorDni" onblur=dni();>
            <option value=""></option>
            <option value="dni">DNI</option>
    </select>&nbsp;
    <label>* Numero: </label>
    <input type="text" id ="numeroDni" name="numeroDni" size="10" onblur=comprobarDNI();><br><br>
    <label>Ciudad: </label>
    <input type="text" id="ciudad" name="ciudad" size="15">&nbsp;
    <label>Telefono fijo: </label>
    <input type="text" id="telefono" name="telefono" size="10"><br><br>
    <label>* Movil: </label>
    <input type="text" id="movil" name="movil" size="10" onblur=comprobarMovil();>&nbsp;
    <label>Direccion: </label>
    <input type="text" id="direccion" name="direccion" size="15"><br><br>
    <label>* Correo electronico: </label>
    <input type="email" id="correo" name="correo" onblur=correoExistente();>&nbsp;
    <label>Fecha de nacimiento: </label>
    <input type="text" id="fecha" name="fecha" onblur=comprobarFecha();><br><br>
    <span>* Campos obligatorios</span><br><br>
    <input hidden type="submit" id="botonRegistro" value="Realizar Registro"><br><br>
</form>

Ajax Code:

function correoExistente()
{
    let correo = document.getElementById("correo");

    if(correo)
    {
        $.ajax({
            type: 'post',
            url: 'altaUsuario.php',
            data: {
                correo:correo,
            },
            success: function (response) {
                $( '#correo' ).html(response);
                if(response==="OK")
                {
                    $("#correo").css("border","2px solid green");
                    return true;
                }
                else
                {
                    $("#correo").css("border","2px solid red");
                    return false;
                }
            }
        });
    }
    else
    {
        $("#correo").css("border","2px solid red");
        return false;
    }
 }

When you lose the focus, it stays as you thought but it does not do what I want it to be to put the edge of the input in red if the mail already exists in the BD or in green if the mail is available. I'm very lost in Ajax to see if you can help me. Thanks in advance