Custom outline style with CSS

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.