CSS highlight on focus

css, focus

Solution

This is because `outline` doesn't respect (for whatever reason) `border-radius`, to emulate this it's easiest to use `box-shadow`:

.filter {
    padding: 0.4em;
    outline: none;
    border-radius: 9px;
}
.filter:focus {
    box-shadow: 0 0 0 2px #f90; /* or whatever colour you'd prefer */
}

JS Fiddle demo.

Problem

I am using border radius on an input field and when I select the field, it gets a border highlight as if there is no border radius i.e. the imaginary rectangle with sharp edges gets highlighted and not the real rounded corners one. Any cues on how to get the rounded rectangle highlighted? The border radius is functioning perfectly but on focus the highlight is not on the rounded corners. ``` <input class="filter" type="text" name = "Test1" value="Test1"> <!--HTML--> .filter{border-radius:9px;} /*CSS*/ ```

Original source