Apply box shadow to border in css - html

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

I have trying to create the div looks like your Figma design,
I use the combination of normal (outset) box-shadow and inset box-shadow.
The outset was used to give bright shadow and make the div looks stronger, and I saw the figma show the darker inner shadow to make the border looks a little bit 3D.
NOTE: I use border-style: ridge to make the border looks 3D as shown in Your Figma, you can make it flat by using border-style: solid
[Capture attached below
body{
background-color: rgb(50, 53, 90);
}
div {
width: 100px;
margin: auto;
color: white;
padding-top: 4px;
padding-bottom: 4px;
border-radius: .6rem;
text-align: center;
border-style: ridge;
border-width: 0.2em;
border-color: rgb(251, 55, 102);
box-shadow: 0em 0em 1.5px rgba(255, 255, 255, 0.25), inset 0px 0px 5px rgba(0, 0, 0, 0.25);
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}
Using border-style: ridge
body{
background-color: rgb(50, 53, 90);
}
div {
width: 100px;
margin: auto;
color: white;
padding-top: 4px;
padding-bottom: 4px;
border-radius: .6rem;
text-align: center;
border-style: solid;
border-width: 0.2em;
border-color: rgb(251, 55, 102);
box-shadow: 0em 0em 1.5px rgba(255, 255, 255, 0.25), inset 0px 0px 5px rgba(0, 0, 0, 0.25);
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}
Using border-style: solid
Sorry if this is not what you want, I hope you like my answer

Answer 2

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

Answer 3

Image showing box shadow effect>
box-shadow: 0 0 25px color-of-choice;
This will create a faint shadow all around the image or block.
Make sure the color matches with your background color.