I can´t override border property of reset.css

I have this HTML and a reset.css and base.css. When trying to override "border" property in base.css, it doesn’t work and I can’t find why.

HTML

<link href="assets/css/base/reset.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/base/base.css">

<form action="#">
    <fieldset class="login__form">
        <legend>Iniciar Sesión</legend>

        <input class="no-focus border--style" type="text" placeholder="Escriba su correo electrónico" title="Ingrese su e-mail" required>
        <input class="no-focus border--style" type="text" placeholder="Escriba su contraseña" title="Ingrese su contraseña" required>

        <button class="login__button button" type="submit">Entrar</button>
    </fieldset>
</form>

reset.css

[tags...], input[type="text" i] {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

base.css

.border--style {
    border-radius: 4px;
    border-bottom: 1px solid var(--border-color-grey);
}

So, "border-radius" works fine, but "border-bottom" doesn’t! The "border: 0;" of reset.css has more power…

Any idea what I am doing wrong?
Thanks!