Border-color css property not behaving on firefox SCSS

I just want my element to have a border color of red.

Docs here indicate I'm using the property correctly:

https://developer.mozilla.org/en-US/docs/Web/CSS/border-color

Why when I do:

 border-color: red;

Like in the example my page looks like this:

I just want my button to have a single solid border color. Thanks for reading.

html:

    <button class="btn btn-outlined">Login</button>

scss:

.btn{
height: 5rem;
border-radius: 350rem;
background-color: transparent;
border-width: 0;
font-size: 1.2rem;
font-family: $font-body-bold;
text-transform: uppercase;

&-outlined{
    border-width: 2px;
    border-color: red;
}
}