CODEWITHSUNDEEP
htmlcss
pokemon king
pokemon king

Reputation: 33

CSS: border color of input box has two colors?

Try the below code, the upper and left border color is darker than the lower and right border color. Why this is happening and how to fix this?

<html>
<input type="text">
</html>

<style>

input:focus{
    outline:none;
    box-shadow: none;

}

input{
    border-color:orange;
    box-shadow: none;
}

</style>

Upvotes: 2

Views: 5429

Answers (4)

mikeattah
mikeattah

Reputation: 43

I had the same problem. I used:

input {
  border: 0.5px solid orange;
}

I think defining the border in one line solves the problem.

Upvotes: 2

Asif Mehmood
Asif Mehmood

Reputation: 473

<html>
    <input type="text">
</html>
<style>
    input{
        border:1px solid orange;
    }
</style>

try this

Upvotes: -1

David Trinh
David Trinh

Reputation: 289

Try using this:

input{
    border-color:orange;
    box-shadow: none;
    border-style: solid;
}

Upvotes: -1

Daniel A. White
Daniel A. White

Reputation: 190935

There are many border-style values. Try finding one that works for you like solid. I'm guessing the input elements are setting it to inset.

Upvotes: 9

Related Questions