Html – How can I add a white border inside the shape?

    .hexagon {
        width: 200px;
        display: inline-block;
        margin: 0 5px;
        color: orange;
        filter: url("#goo");
    }

    .mask {
        display: block;
        background: currentColor;
        padding-top: 115%; /* 100%/cos(30)  */
        clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    }

    img {
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right:0;
        width: 100%;
        height: 100%;
    }
    .border-mask{
        width: 70%;
        height: 73%;
        position: absolute;
        left: 14px;
        top: 15px;
        clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
        background: linear-gradient(-150deg, white 35px, transparent 0) bottom right, linear-gradient(30deg, white 35px, transparent 0) bottom left, linear-gradient(150deg, white 35px, transparent 0) top left, linear-gradient(-30deg, white 35px, transparent 0) top right;
        border: white solid 7px;
        margin: 10px;
    }

<div class="hexagon">
    <div class="mask">
        <img src="https://images.unsplash.com/photo-1724884564497-f5024b7e2f93?q=80&w=257" />
        <div class="border-mask"></div>
    </div>
</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop" />
        </filter>
    </defs>
</svg>