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 w3c school post to see applicable rules.