How to use border-width Property In CSS
The border-width property in CSS is used to set the width of the border on all four sides of an element. It is a shorthand property that allows you to set the width of the top, right, bottom, and left borders. To style the border at the bottom set the property outline: 0; removes the default focus outline on the input field. Then, The border-width: 0 0 2px; sets the border width for the input field, applying a 2-pixel bottom border.
Example: Illustration of the bottom border with only the Input text field using the border-width property.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Bottom border on input text field</title> <style> div { height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } h1 { color: green; } input { outline: 0; border-width: 0 0 2px; border-color: green; } </style> </head> <body> <div> <h1>w3wiki</h1> <input type="text" placeholder="Enter your message.." id="geek" name="geek" /> </div> </body> </html> |
Output:
How to apply bottom border with only Input text field using CSS ?
Adding a bottom border to the input field visually distinguishes it from surrounding elements on the page. Making input fields stand out on a website in a form for example is crucial. Styling these inputs with clear borders, appealing colors, and effects, can easily capture the user’s attention.
Table of Content
- Using the outline and border-bottom properties
- Using the ::after pseudo-element