DEV Community

Phong Duong
Phong Duong

Posted on • Originally published at phongduong.dev on

2 2

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)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay