October 3, 2022

How to Change Input Field Border Color in HTML and CSS

In this tutorial, we will learn how to change input field border color in HTML and CSS. As you are already aware, colors are crucial to give a website a decent look and feel.

In most browsers, the default input field border color is black. To change this input field border color, we have to use the CSS border property.

In the following example, we will demonstrate how you can change the input field border color. Please have a look over the code example and the steps given below.

HTML

We have 3 elements (div, label, and input) in HTML file. The div element is just a wrapper for the rest of the elements.
The label element is used to specify a label for an input field. The value of for attribute is set to the name of the corresponding input field.
In the head element, we have added a stylesheet style.css using the link element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input field border color change</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div>
        <label for="name">Name:</label>
        <input type="text">
    </div>
</body>

</html>

CSS

We are selecting the div element and setting the value of the text-align property to center. This is required to horizontally center align the input field.
To change the input field border color, we are selecting the input element and setting the value of the border property to 2px solid red. As a result, it will change the default input field border color to red.

div {
    text-align: center;
}

input {
    border: 2px solid red;
}

You May Also Like: