Displaying a border image over another image

.inner-image{
    position: absolute;
    right: 0px;
    z-index: 0;
}
.image-border{
    z-index: 1;
}

.inner-image{
    position: absolute;
    right: 0px;
    z-index: 0;
}
.image-border{
    z-index: 1;
}

<div class="product" id="keyboard">
            <img src="../assets/product-border.png" alt="border" class = "image-border" >
            <img src="../assets/keyboard.png" alt="keyboard" class = "inner-image">
            <div class="title">Headset</div>
        </div>

<div class="product" id="keyboard">
            <img src="../assets/product-border.png" alt="border" class = "image-border" >
            <img src="../assets/keyboard.png" alt="keyboard" class = "inner-image">
            <div class="title">Headset</div>
        </div>