CSS - Is it possible to add a border on the box shadow?

Is it possible to add a border to a box-shadow?

I want to create a class with a coloured offset with that offset being outlined in a black border.

Now I know I can create a div and offset it to get this desired look, but I want to know if it's possible to do it without so I can just create a class and add it to the divs that I want to do this too.

I attached a snippet showing the colour offset but I would like the red offset to be outlined in a black border.

.example-div{
  width: 100px;
  height: 100px;
  border: 1px solid black;
  box-shadow: -5px 5px red;
}

<div class="example-div">
</div>

Solution

You can add additional box-shadows to your div to get that effect. For your case update your box-shadow property to something like this

box-shadow: -5px 5px red, 
    -5px 5px 0px 3px black;

This resource has tons of more info about box-shadows and it's syntax https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow if you want to follow.