Border inset/groove/ridge renders inconsistently

[PowerfulBacon]

When using a border which is set to inset, groove, or ridge instead of solid, during hot-reloads the border will render correctly but will occasionally switch back to solid. In the final build the border appears solid.

If I edit the SCSS and cause a hot-reload to be triggered, then all of the grooves appear. When running in dev mode, any update to the UI will also cause the grooves to re-appear.

CSS in question:

.example {
  border: 0.417vw inset #847875;
}