Phong Duong

🔎Search

Custom outline style with CSS

27-11-2020 | #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.

Share: TwitterFacebookLinkedInHacker News