Simple question, why half of the input border is darker? When I set red it look like a gradient from light red to dark red, with gray it is from gray to black.

add-form {
    @include flex-center;
    

    &__input {
        margin: 2rem 0 0 2rem;
        padding: 2rem 1rem 2rem 1rem;
        font-size: 1.4rem;
        border-radius: 10rem;
        border-color: red;
    }

HTML

<form class="add-form" name="add" method="POST"> {% csrf_token %}
                {{ form }} <!-- it has class add-form__input it is from Django widget.-->
                <button  name="add" class="add-form__submit-button" type="submit">Submit</button>
            </form>

CodePudding user response：

Somehow I figured out.

 &__input {
        margin: 2rem 0 0 2rem;
        padding: 2rem 1rem 2rem 1rem;
        font-size: 1.4rem;
        border-style: solid;
        border: 2px, gray;
        border-radius: 2rem;

had to add border 2px and border style.

CodePudding user response：

The default button border is the bottom half is black and a thicker line than the top half. If you want to get rid of this, you can instead try this:

border: 2px solid red;