I have a question. Why does the style on the input (border-color) make me make this dark green line? it should be all light green!

.contact .contact-content input[type=text]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-color: rgb(0, 255, 72);
border-radius: 5px;
border-width: 3px;
font-family: 'Poppins', sans-serif;
}

picture of the problem

CodePudding user response：

It looks like the border style property is on inset. If that's the case you should change it to solid : border-style: solid; instead of border-style : inset;

CodePudding user response：

It was because you haven't added the border style to the input. The border style for elements is set inset by default. Take a look at mdn.

input[type=text]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-radius: 5px;
/* border-color: rgb(0, 255, 72);
border-width: 3px;
border-style: solid; */
/* Use shorthand method */
border: 3px solid rgb(0, 255, 72);
font-family: 'Poppins', sans-serif;
}

<input type="text" />