Button Border Color Issues - html

Question

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!

Answer 1

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>

Answer 2

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>

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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>