0

I have an input field with border-radius and when it's in focus the outline appears but it has rectangular property. I'm using Chrome. Is this a bug? I don't want to remove outline I just want it to respect border-radius.

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • Could you put together a http://jsfiddle.net as an example? – aaron-bond Mar 10 '14 at 09:31
  • possible duplicate of [Is it possible to create an outline border with radius?](http://stackoverflow.com/questions/14896099/is-it-possible-to-create-an-outline-border-with-radius) – Quentin Mar 10 '14 at 09:36

2 Answers2

2

No unfortunately it is not possible to keep an outline that is respecting the border-radius in all browsers. Instead it would be much easier to remove the outline with outline: 0; and adding a custom border or box-shadow with CSS on focus.

Example:

input[type="text"] {
 outline: none;
}   
input[type="text"]:focus {
 box-shadow: 0 0 3px blue;
}

(http://jsfiddle.net/3cggR/)

Dion
  • 3,145
  • 20
  • 37
-2
input[type=text]:focus{
box-shadow: 0px 0px 2px 1px orange;
outline:none;
}
arifix
  • 740
  • 3
  • 14
  • 32