DEV Community

Phong Duong
Phong Duong

Posted on • Originally published at phongduong.dev on

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;
}
Enter fullscreen mode Exit fullscreen mode

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)