How to remove an border?

Question

I use an <input> for which I style the border:

input {
  font-size: 300%;
  border-width: 10px;
  border-style: solid;
  border-radius: 30px;
}

<input>

The problem is that once <input> has the focus, a tiny blue border appears:

I do not see it anywhere in DevTools so I believe it is a property of <input> itself, which was not intended to have rounded borders (wildly guessing)

Is it possible to get rid of it?

Please do not remove the `outline` property - http://a11yproject.com/posts/never-remove-css-outlines/ — sol, Oct 11 '17 at 14:42
@ovokuro: why? (is this because of the accessibility mentioned in an answer?) — WoJ, Oct 11 '17 at 14:43
Yes, keyboard users depend on the feedback that it provides. — sol, Oct 11 '17 at 14:45

score 3 · Accepted Answer · answered Oct 11 '17 at 14:40

3

You can remove it with outline:none, but it creates accessibility issues.

input {
  font-size: 300%;
  border-width: 10px;
  border-style: solid;
  border-radius: 30px;
  outline:none;
}

<input>

answered Oct 11 '17 at 14:40

Matthew Johnson

4,875
2
38
51

1

Thanks, I was not aware of the accessibility point (good link). I will keep it like this then. – WoJ Oct 11 '17 at 14:45

score 0 · Answer 2 · answered Oct 11 '17 at 14:41

0

that should work for you

textarea:focus, input:focus{
    outline: none;
}

but this is already more detailed in the following link

How to remove border (outline) around text/input boxes? (Chrome)

answered Oct 11 '17 at 14:41

Alvaro Valle

92
7

score 0 · Answer 3 · answered Oct 11 '17 at 14:41

0

input:focus {
  outline: none;
}

answered Oct 11 '17 at 14:41

vic

134
1
11

How to remove an border?

3 Answers3