Format only the edge sides of the button

Question

There is another way to format only the right and left borders, and leave top and bottom None ?

border-top: 0px;
border-bottom: 0px;
border-right: 2px solid #444444;
border-left: 2px solid #444444;

Answer 1

You can do as follows, where the property border-width will set the width of the edges:

button {
  border-width: 0 2px 0 2px; /* Ordem: top, right, bottom, left */
  border-style: solid;
  border-color: #444;
}

<button type="button">Botão</button>

Or you can do:

button {
  border: #444 solid;
  border-width: 0 2px 0 2px;
}

<button type="button">Botão</button>

And also (Suggestion of @lazyFox):

button {
  border: none;
  border-left: 2px solid #444;
  border-right: 2px solid #444;
}

<button type="button">Botão</button>

Answer 2

Another suggestion is to use the short form to set the border size using only two values:

button{
   border: solid #444;
   border-width: 0 2px; /* top/bottom = 0px, right/left = 2px */
}

Example:

button{
   border: solid #444;
   border-width: 0 2px;
}

<button type="button">Botão</button>

Answer 3

They forgot a variation:

button {
  border: 2px #444 solid;
  border-bottom: none;
  border-top: none;
}

    <button type="button">Botão</button>

if two rules have the same force, the one that is declared last is the one that will be valid.

OBS: border: none; or border: 0; both are valid, I prefer border: 0 because it’s shorter;