Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set Bordered Form Inputs with CSS
The CSS border property is used to add borders to form input elements. You can customize the border width, style, and color to create visually appealing forms.
Syntax
input {
border: width style color;
}
Possible Values
| Property | Values | Description |
|---|---|---|
border-width |
px, em, thin, medium, thick | Sets the border thickness |
border-style |
solid, dashed, dotted, inset, outset | Defines the border appearance |
border-color |
color names, hex, rgb | Specifies the border color |
Example: Inset Border for Text Inputs
The following example creates bordered text inputs with an inset style −
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
width: 100%;
padding: 10px 15px;
margin: 5px 0;
box-sizing: border-box;
border: 3px inset orange;
font-size: 16px;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<p>Fill the below form:</p>
<form>
<label for="subject">Subject</label>
<input type="text" id="subject" name="sub">
<label for="student">Student</label>
<input type="text" id="student" name="stu">
</form>
</body>
</html>
A form with two labeled text input fields appears. Each input has an orange inset border (3px thick) with proper padding and spacing.
Example: Solid Border with Hover Effect
This example shows solid borders with a color change on hover −
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"], input[type="email"] {
width: 100%;
padding: 12px;
margin: 8px 0;
border: 2px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
transition: border-color 0.3s;
}
input[type="text"]:focus, input[type="email"]:focus {
border-color: #4CAF50;
outline: none;
}
label {
display: block;
margin-top: 15px;
color: #333;
}
</style>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</form>
</body>
</html>
A form with two input fields featuring gray solid borders that change to green when clicked or focused. The inputs have rounded corners and smooth transitions.
Conclusion
The border property provides flexibility in styling form inputs. Combine it with padding, margin, and :focus pseudo-class for professional-looking forms.
Updated on: 2026-03-15T12:32:19+05:30
227 Views
Advertisements