Styling Own Button - css

Question

I want to style my own button. I've managed to get rid of the default style, but now I want to add a thin blue border around it, but don't know how. If I just get rid of the border: none, then the default style comes back, which is not what I want
This is my style.css:
input#hideshow{
margin: 0;
border: none;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border-color: #7BC2E3; //not showing up though
width: 280px;
text-align: left;
}

Answer 1

You also need to specify border-style because it's default value is none demo.
But the easiest way is to use the border short hand and also specify
border-width:
border:1px solid #7BC2E3;
and remove border:none;
DEMO
CSS :
input#hideshow{
margin: 0;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border:1px solid #7BC2E3;
width: 280px;
text-align: left;
}

Answer 2

U just specified the border color alone. U forget to specify border width
Demo
border: 2px solid #7BC2E3;

Answer 3

Your CSS works perfectly. But you don't want it to work this way. You set border to none so no border is displayed. You better should set to, for instance:
border: 1px solid #7BC2E3;
And remove the border-color line.
https://developer.mozilla.org/en-US/docs/Web/CSS/border

Answer 4

Try doing this:
input#hideshow{
margin: 0;
border:1px solid blue;
border-radius: 20px;
padding: 2px 0px 2px 8px;
color: #4D7782;
font-size:18px;
background: #D3ECE5;
border-color: #7BC2E3; //not showing up though
width: 280px;
text-align: left;
}
Hope this is what you want.

Answer 5

Try like this: Demo
border:1px solid #7BC2E3;
and remove
border:none from your code