Table of Content
Much like you can frame a picture and hang it on your wall, you can add borders to your input form HTML elements that frame them visually.
There are several ways to design a form. But CSS is the way to go for designers.
Let’s give it a look to this basic form:
<div class="container"> <form action="action_page.php"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Your name.."> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> <input type="submit" value="Submit"> </form> </div>
How to add custom borders to a form input with CSS?
In CSS, you can control a border’s:
width (thin, wide, 5px, etc.)
style (solid, dashed, etc.)
color (hex code, RGB value, etc.)
This results in a ton of border options that can spice up your form elements.
/* Style inputs with type="text" */ input[type=text] { width: 100%; /* Full width */ padding: 12px; /* Some padding */ border: 1px solid #ccc; /* Gray border */ border-radius: 4px; /* Rounded borders */ box-sizing: border-box; /* Make sure that padding and width stays in place */ margin-top: 6px; /* Add a top margin */ margin-bottom: 16px; /* Bottom margin */ resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */ } /* Style the submit button with a specific background color etc */ input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } /* When moving the mouse over the submit button, add a darker green color */ input[type=submit]:hover { background-color: #45a049; } /* Add a background color and some padding around the form */ .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; }
You must add this on your stylesheet, and it will work fine. We added some padding to the elements to make it look better, even a hover color for the submit button.