Format only the sides of the button border

Question

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

Is there another way to format only the right and left edges, and leave top and bottom none?

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

html5 css3

asked by anonymous 12.02.2018 / 15:58

3 answers

Problems with Layout and CSS in IE 10 and 11 Pass array on route Laravel

score 1 · Answer 1

You can do this as well, where the border-width property will set the widths of the borders:

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 also do:

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

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

And yet (Suggested @lazyFox ):

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

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

score 0 · Answer 2

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 worth.

Note: border: none; or border: 0; both are valid, I prefer border: 0 because it is shorter;

score 0 · Answer 3

Another suggestion is to use the short form of setting 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>