How To Create Tray Shaped Bottom Border Like Android Input?

In one of the custom input I created in js file for an application using Phonegap, we need to have exact border as it was resulting in normal input in Android devices. So the que

Solution 1:

Use this solution

input {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid black;

}

.rawp{
    position: relative;
    display: inline-block;
}


.rawp:after {
    content: "";
    background: black;
    width: 1px;
    height: 10px;
    left: 0;
    bottom: 0;
    z-index: 99;
    position: absolute;
}

.rawp:before {
    content: "";
    background: black;
    width: 1px;
    height: 10px;
    right: 0;
    bottom: 0;
    z-index: 99;
    position: absolute;
}

<divclass="rawp"><input></input></div>

Solution 2:

To achieve this we can use outline and border combination. We need a bigger outline then the boarder on left and right and just as long as we need size of the tray shape. So basically an outline which is transparent work as a mask to get needed shape.

I make them colored as green outline and rad border to for better understanding.

The resulting css looks like this.

outline-width: 4px;
outline-style: solid;
outline-offset: -5px;
border-width: 005px;
border-style: solid;
outline-color: #fcfcfc;
border-color: rgba(153, 153, 153, 0.5);

If you have any other ways to achieve it. kindly post it.