Border radius on Focus input field

use the :focus pseudo selector

.rest:focus{
    border-radius:0;
}

DEMO

You have to disable the outline of the element focus state:

*:focus { /*OR .rest:focus*/
    outline:none;
}

Here is a FIDDLE

If you want the border-radius on the browser default focus outline you can do it only on firefox with -moz-outline-border:5px; , but this will only work on FF, however the request to implement a similar feature in WebKit was closed as WONTFIX, The plan for the future is to make the outlines follow the borders.

The other answers have covered the solution, however, the supplied CSS styles do not accurately reproduce the blue ring color or size. For example, replacing:

:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

With the solutions provided, results in a purple-tinted blue before and after pic. Instead, try this color:

.rest:focus {
  outline: none; 
  border-radius: 8px;  /* Your border radius here */
  box-shadow: 0px 0px 1px rgba(0,100,255,1),
              0px 0px 2px rgba(0,100,255,1),
              0px 0px 3px rgba(0,100,255,1); /* #0064FF */
}

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;
}

<input type="text" class="rest" />

codepen demo