CODEWITHSUNDEEP
css
sleepypanda
sleepypanda

Reputation: 89

Styling Own Button

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;
}

Upvotes: 1

Views: 53

Answers (5)

web-tiki
web-tiki

Reputation: 103750

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;
}

Upvotes: 1

G.L.P
G.L.P

Reputation: 7207

Try like this: Demo

border:1px solid #7BC2E3;

and remove

border:none from your code

Upvotes: 0

Snehal Nagdeote
Snehal Nagdeote

Reputation: 37

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.

Upvotes: 1

idmean
idmean

Reputation: 14865

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

Upvotes: 1

Gibbs
Gibbs

Reputation: 22956

U just specified the border color alone. U forget to specify border width

Demo

border: 2px solid #7BC2E3;

Upvotes: 1

Related Questions