A workaround for box-shadow not passing through to the inside of a border

This is a problem more easily shown than explained. Take the following image:

It’s an indicator — the sort you’d find on any colorpicker — with a shadow. It seems simple enough, but how would you build it in CSS?

My first port of call was a box-shadow on an element with a 2px white border. The problem with that is that box-shadow’s shadow doesn’t take border styles into account, it just creates a shadow behind the element it was applied to resulting in this:

After some tinkering, this is the solution I came up with…

Add the white border to the .indicator element as before

Create a .indicator::before psuedo-element, and give it a border of the same width, only making this one black

Leverage filter to blur the before element in imitation of box-shadow’s blur

…which, once translated into SCSS, does indeed produce a .indicator with a shadow that can be seen both on the outside and the inside of the white border.