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…

…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.

1// For a `<span class="indicator"></span>` element
3$indi-width: 8px;
4$indi-height: 8px;
5$indi-border-width: 2px;
7.indicator {
8 border-radius: 50%;
9 border: $indi-border-width solid #fff;
10 display: block;
11 height: $indi-height;
12 position: relative;
13 width: $indi-width;
15 &::before {
16 border-radius: 50%;
17 border: 2px solid rgba(#000, .5);
18 content: "";
19 filter: blur(1px);
20 height: $indi-height;
21 margin-left: -$indi-border-width;
22 margin-top: -$indi-border-width;
23 position: absolute;
24 width: $indi-width;
25 z-index: -1;
26 }