Infem 401 CedupHH Infem 401 CedupHH - 7 months ago 13
HTML Question

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

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:

This is the square border

Thanks.

Answer

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.