how to give input border left and right small length

Question

I need to display the input field and i need give border bottom , left and right. But here i want only small portion border left side and right side.

.solid {
  border-style: solid;
  border-left-style: dashed;
  border-top: none;
  border-right-style: dashed;
}

<input class="solid">

Answer 1

You can use box-shadow to create this type of border.

input {
  width: 300px;
  border: none;
  margin: 50px;
  height: 35px;
  box-shadow: 13px 13px 0px -10px #000000, -13px 13px 0px -10px #000000;
  outline: none;
  font-size: 22px;
  background: none;
}

<input type="text">