Outline

Dashvar provides some utility variables for outline. We recommend using them in combination with outline-offset as follows:

.selector:focus {
  outline-offset: var(--outline-offset-1);
  outline: var(--outline-black);
}

var(--outline-none)

2px solid transparent

var(--outline-white)

2px dotted white

var(--outline-black)

2px dotted black

Interactive Example

Feel free to play with this interactive example to get comfortable with the tool.