Border radius on Focus input field

Question

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

HTML

CSS

.r         


        

Answer 1

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 */
}

Answer 2

use the :focus pseudo selector

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

DEMO

Answer 3

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.

Answer 4

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