Border radius on Focus input field

Question

how can we adjust the border radius of the input field focus.

HTML

CSS

.r         


        

Answer 1

Removed the standard outline (which does not accept border-radius) and used a blue box-shadow instead:

.rest{
  border-radius: 15px;
  border: 1px solid grey;
  padding-left: 8px;
}

.rest:focus {
  outline: none;
  box-shadow: 0px 0px 2px #0066ff;
}

codepen demo