Reza Reza - 4 months ago 8
HTML Question

border-color ignores my color

I would like to use the color

#644220
for the border of my input field. I have tried it like this:

HTML

<input class="my_border" type="text">


CSS

.my_border {
width:100%;
padding: 20px;
outline: none;
border-width: 0 0 1px 50px;
border-color: #644220;
}


https://jsfiddle.net/9dss92v6/1/

When I use
red
or any other HEX code, it will work for me. It won't only accept the code
#644220
. And
#644220
is an existing color as you see here.

Not even the RGB code (
border-color: rgb(100, 66, 32);
) is working.

What is wrong with it?

Answer

From MDN:

Note: The default value of border-style is none. This means that if you change the border-width and the border-color, you will not see the border unless you change this property to something other than none or hidden.

Now I assume that browsers are not following this and they show some solid default border by default. [1]

You need to define a style for your border for example solid

border-style: solid;

Demo


[1] Was playing further with this, turns out that it's weird behavior I think from the browsers point of view. If am using a word like red or tomato as color names, it works but still, the color is not the one we expect it to be for example this vs this.

I will update this thread if I got any solid reasoning for this.


Edit 3:

Debugging further, it turns out that the default value Chrome sets is inset for border, i.e, border-style: inset;, which has grayish border which is like a shadow. Hence, your color does render but it mixes with the inset border being set by Chrome defaults. Now am not sure why the color is not overridden by the color declaration you have in your stylesheet, might be a bug.

Comments