DEV Community

loading...

Custom outline style with CSS

phongduong profile image Phong Duong Originally published at phongduong.dev on ・1 min read

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.

Discussion (0)

pic
Editor guide