How to set the border per side for an input box?

Question

The input-box comes with an outline that can be set to 0. It will then show an ugly border around it.

This border can be set to none as well, leaving the input box without a border.

However I'd like to put a border only on the top and bottom of the input box, but can't get it done. Any ideas?

kevinMario · Accepted Answer · 2015-09-22T07:39:20.840

2

Apply this to your input element

input {
    border: 1px solid #000; /* this will give the input 1px black border all around */
    border-left: 0 none;
    border-right: 0 none;
}

Should do it.

Or alternatively, you can go

input {
    border: 0; /* resets default border */
    border-top: [your border styling];
    border-bottom: [your border styling];
}

edited Sep 22 '15 at 07:39

answered Sep 22 '15 at 07:36

kevinMario

thanks @kevinMario! Can the border style be adjusted as well? (like the pixels etc.) nothing seems to work. – Ethannn Sep 22 '15 at 07:38
set border-top and border-bottom property. – Sumanta736 Sep 22 '15 at 07:38
Border styles are one of **{solid,double,dashed,dotted,ridge,groove,inset,outset}** try them out ! – Arif Burhan Mar 07 '16 at 19:09

score 1 · Answer 2 · answered Sep 22 '15 at 07:40

1

Just do this if you want to use the provided border..

input {
  border-left:0px;
  border-right:0px;
}

If you don't want that than use..

input {
  border-top:1px solid red;
  border-bottom:1px solid red;
  border-left:0px;
  border-right:0px;
}

answered Sep 22 '15 at 07:40

Amit singh

score 0 · Answer 3 · edited May 23 '17 at 12:01

0

In addition to the borders, there's also an outline added by the browser.

You can do

textarea:focus, input:focus{
    outline: 0;
}

or even

*:focus {
    outline: 0;
}

to disable this line.

Source : https://stackoverflow.com/a/3397158/3510872

edited May 23 '17 at 12:01

Community

answered Sep 22 '15 at 07:54

Sebastien

3 Answers3