Apply box shadow to border in css

Question

I made this button design in Figma and would like to apply it in CSS.

If you look closely you can see that I applied a highlight with a white shadow on the border

But when I do it with the following CSS lines it just has a shadow inside and not on the border like this image shows.

div {
  border-style: solid;
  border-width: 0.7em;
  border-color: var(--highlight);
  box-shadow: inset 0.2em 0.2em 0.4em rgba(255, 255, 255, 0.25), inset -2px -2px 4px rgba(0, 0, 0, 0.25);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}

<div> Sign Up </div>

how can I apply the highlight/shadow on the border?

Answer 1

<style> 
#example3 {
  border: 10px solid red;
  border-radius: 5px
}
#bg{
background-color: #000;
color: #fff;
padding: 20px;
text-align: center
}
</style>

<div id="bg">
<div id="example3">
  <p>A pink shadow.</p>
</div>
</div>