Border radius on Focus input field

Question

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

HTML

CSS

.r         


        

Answer 1

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.