Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS highlight on focus

CSS highlight on focus


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.

.filter{border-radius:9px;} /*CSS*/
Problem courtesy of: Anish Shah


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.

Solution courtesy of: David Thomas


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS highlight on focus


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription