CODEWITHSUNDEEP
htmlcssbutton
ParkerWilliams
ParkerWilliams

Reputation: 349

Button Border Color Issues

I have created a button with the following HTML and CSS code. 

.btnstyle2{
    height: 28px;
    text-align: center;
    background-color: #F8F8F8;
    border-radius: 3px;
    border-color: #E8E8E8;
    
}
<button type="button" class="btnstyle2">Dismiss</button>

The issues I am having is getting rid of the right and bottom borders that are darker than the left and top borders. I need the entire border for the button to be the light gray that is stated in the CSS code as border-color: #E8E8E8. Any help would be great! Thanks!

Upvotes: 8

Views: 45833

Answers (6)

Ivin Raj
Ivin Raj

Reputation: 3429

Please try this one:

Html

<button type="button" class="button1">Demo button</button>

Css:

.button1{
    height: 28px;
    text-align: center;
    background-color:#F3F3F3;
    border-radius: 3px;
    border-color: #E8E8E8;
    border-style:solid;
}

DEMO

Upvotes: 2

Ronald Mathews
Ronald Mathews

Reputation: 2248

You can use border: attribute insted of border-color: which you used to style borders in CSS. Also you can edit border-color, border-style on a single line like I have shown below.

The CSS:

.btnstyle2{
   height: 28px;
   text-align: center;
   background-color: #F8F8F8;
   border:2px solid #E8E8E8;
   border-style:solid;
}

HTML:

<button type="button" class="btnstyle2">Dismiss</button>

Upvotes: 0

Les
Les

Reputation: 241

Just override the button default class unwanted properties:

button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    padding: 2px 6px 3px;
    border: 2px outset buttonface; /* bad */
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-color: buttonface;
    box-sizing: border-box;
}

Example:

.btnstyle2{
    height: 44px;
    width: 46px;
    text-align: center;
    border-radius: 3px;
    border-color: #E8E8E8;
    border: none; /* new here */
    background: url('https://www.linkedin.com/scds/common/u/images/logos/linkedin/logo_in_nav_44x36.png') left center no-repeat;
}

Upvotes: 1

tonyedwardspz
tonyedwardspz

Reputation: 1885

The button is using the default styling. By setting the border to solid will override the default styles.

You can combine the border declaration of width, style and colour into one line like so:

.btnstyle2{
    height: 28px;
    text-align: center;
    background-color: #F8F8F8;
    border-radius: 3px;
    border: 2px solid #E8E8E8;
}
<button type="button" class="btnstyle2">Dismiss</button>

Upvotes: 21

Jeremy Board
Jeremy Board

Reputation: 181

Use this for the border. border:1px solid #e8e8e8;

Upvotes: 2

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

You've got a outset style, that's default in buttons (inset in inputs for example). If you need a solid border add this:

 border-style: solid;

You can view it:

.btnstyle2{
    height: 28px;
    text-align: center;
    background-color: #F8F8F8;
    border-radius: 3px;
    border-color: #E8E8E8;
    border-style:solid;
}
<button type="button" class="btnstyle2">Dismiss</button>

Upvotes: 5

Related Questions