You can custom the outline of the component when you focus on it. CSS allows you to custom these properties:
outline-color
outline-style
outline-width
The order of these properties doesn't matter. You can use just one, two, or all three of them.
For example:
button {
background: tomato;
color: white;
border: none;
}
button:focus {
outline: blue dotted 5px;
}
When you click the button, you will see the blue dotted outline around the button.
The outline doesn't take up space. It won't affect the layout when it shows up.
Top comments (0)