I can´t override border property of reset.css-CodePudding

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 >
        <legend>Iniciar Sesión</legend>

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

        <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!

CodePudding user response：

from the code you have posted everything looks fine. Maybe try with !important

    border-bottom: 1px solid red !important;

CodePudding user response：

Try writing inline css. Sometimes its better to avoid using !important property to prevent conflicts in files.