Need to have half width border in one side and full width border in another side

Issue

Here is my html and css code:

.image-box{
  max-width: 300px;
  position: relative;
}
.image-box img{
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  
   border: 8px solid #000000;
    border-right: 0;
    border-bottom: 0;
    /* border-image: linear-gradient(to right, #000 68%, transparent 32%) 100% 1; */
}

<div class="image-box">
   <figure>
     <img src="https://via.placeholder.com/300"  alt="">
  </figure>
</div>

While running this, I receive this.

But, I want to have something like this:

If I uncomment this line

border-image: linear-gradient(to right, #000 68%, transparent 32%) 100% 1; 

Then it shows half width border on top, but this also make the left border disappear and show like this.

Solution

you are almost good with border-image. You need to correctly define the slice.

.image-box {
  max-width: 300px;
  position: relative;
}

.image-box img {
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  border: 8px solid #000000;
  border-right: 0;
  border-bottom: 0;
  border-image: linear-gradient(to right, #000 68%, transparent 32%) 1;
}

<div class="image-box">
  <figure>
    <img src="https://via.placeholder.com/300" alt="">
  </figure>
</div>

Answered By - Temani Afif