Partial vertical borders on form input

Question

GOAL:
I am trying to create partial vertical borders on a form input. The desired effect is the following:

PROBLEM:

Answer 1

You can go with gradient for each side like this:

input {
 border:none;
 padding:10px;
 background:
   /* Bottom side*/
   linear-gradient(#000,#000) bottom      /100% 2px ,
   /* Left side */
   linear-gradient(#000,#000) bottom left /2px 10px,
   /* Right side */
   linear-gradient(#000,#000) bottom right/2px 15px;
 background-repeat:no-repeat;
}

<input type="text" placeholder="text">