when I focus my input with border-radius , a square border appears out

Question

when I focus my input with border-radius, a square border appears out.

Can i make this second border dispear or just set a border radius to it?

input[type="text"]{
  border: 1px solid red;
  border-radius:10px;
}

<input type="text">

This is the square border:

Thanks.

Answer 1

The blue rectangle is referenced as outline you can hide it via the outline: none rule

input[type="text"] {
  border: 1px solid red;
  border-radius:10px;
}
input[type="text"]:focus {
  outline: none
}

<input type="text">

Of course you can style it.. See this doc to see applicable rules.

---

*UPDATE*: In my answer I assumed that the question was about removing the outline of the HTML element to provide a custom one. As @Antifish made me notice this is a bad practice unless you don't provide alternative styles.

I looked up for some extra resources and found out someone made a website about this and it's clearly stated that:

Defining focus to navigation elements is an accessibility requirement, it's clearly stated in the Web Content Accessibility Guidelines:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)