Цвет рамки CSS: как установить нижний цвет границы?

Question

Текущий результат: нижняя граница серого цвета

Желаемый результат: все границы белые

Проблема: граница цвета выбран белый в CSS

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

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

Answer 1

Вы должны установить border-style как solid, чтобы он работал. Серая граница, которую вы видите внизу, связана с стилем UA по умолчанию, который я border-style: outset.

Как отметил Marcos Pérez Gude в his comment по умолчанию border-style для кнопок outset и что для input и textarea элементов inset.

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

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

Screeshot БВС стилевых Значение:

Answer 2

Добавить эту строку в CSS

border-style: solid; 

Answer 3

As Гарри подчеркнул: вам нужно указать стиль границы, чтобы изменить значение по умолчанию.

вы также можете использовать более простой для запоминания кода, как это:

.zoom { 
border-top:3px solid white; 
border-bottom:3px solid white; 
background-color:white; 
} 

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