CSS Border Color: How to set bottom border color?

Question

Current result: bottom border is colored gray

Desired result: all borders are white

Problem: border-color is set to white in the CSS

.zoom {
  border-width: 2px 0px 2px 0px;
  background: white;
  border-color: white;
}

<button class="zoom">???</button>

Answer 1

You have to set the border-style as solid explicitly for it to work. The gray border that you see at the bottom is because of the default UA styling which I is border-style: outset.

As noted by Marcos Pérez Gude in his comment the default border-style for buttons is outset and that for input and textarea elements is inset.

.zoom {
  border-width: 2px 0px 2px 0px;
  background: white;
  border-color: white;
  border-style: solid;
}

<button class="zoom">???</button>

Screeshot of UA Stylesheet Value: