How to make a text input border color gray

Hello! I’m currently working on the Google homepage project and I can’t figure out why my search bar border is not entirely gray. I have a feeling it has something to do with conflicting search styles, but then I’m confused as to why it is half gray and half black. Here is my CSS selector for the search bar:

#search-bar {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 650px;
    height: 40px;
    font-size: 20px;
    border-radius: 20px;
    border-color: rgb(200, 200, 200);
    text-indent: 10px;
}

And here’s what it looks like:

Any help is greatly appreciated!

Hi William,

Try adding border-style: solid; to your CSS. I think you always want to get in the habit of specifying the size, style, and color of your border, perhaps in the same line:
border: 1px solid black;
If #search-bar were a div and not an input, no border would show up at all without setting the style.

1 Like