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!


Answers:


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>