Rounded input text box, but square selection box appears [duplicate] - html

Question

This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
Closed 2 years ago.
text input selection(.gif)
I make a text input box have rounded corners, but when I select it to type, a square selection box surrounds it.
How can I make the selection box to have rounded corners as well? Or is there a way to disable the square selection box that appears?
Thanks for your help.

Answer 1

What's showing up is the outline. The outline is a CSS property. It appears on elements that are in focus (such as an input being typed in). You can remove it if you like, but make sure to use border, box-shadow, or something else when it is focused. Adding a focus indicator is important for web accessibility. Here's an example of what is happening and a possible solution:
input {
border-radius: 10px;
}
#input2 {
outline: none;
}
#input2:focus {
border: 2px solid blue;
}
<input id="input1">
<br><br>
<input id="input2">
This substitutes border for outline. It's still accessible, but border respects border-radius.

Answer 2

Try this:
input {
border-radius: 5px;
}
input:focus {
outline-width: 0;
}
<input>
As #AlexH pointed out, you could also add other things to the input: focus to make it more accessible.
Example:
input{
border-radius: 5px;
outline: none;
}
input:focus{
border: 2px solid red;
border-radius: 10px;
}
<input>
Making it clean:
You can use #keyframes for an even better transition, and transitions, as they last longer, might be a more effective tool for accessibility (in my experience)
input{
border-radius: 5px;
border: 1px solid black;
}
input:focus{
animation: input 0.5s forwards;
border-radius: 7px;
border: 2px solid #55555;
outline: none;
}
#keyframes input{
from{
border-radius: 5px;
border: 1px solid black;
}
to{
border-radius: 9px;
border: 1px solid #555555;
}
}
<input>