cssborderborder-image

double border right css

Good day, I am finding it hard to build a double right border with the first line being 50% height starting from the bottom.

Here is a image to show my outcome should be

image of double line one 50% one full

My code :

.border-double-half-right {
  border-right: 5px double rgb(125, 185, 153);
  border-image: linear-gradient(to right, rgba(108, 219, 141, 0) 25%, rgba(108, 219, 141, 1) 25%, rgba(108, 219, 141, 1) 75%, rgba(108, 219, 141, 0) 75%);
  border-image-slice: 1;
}
Solution

  • Use border and background

    .box {
  --b: 5px; /* thickness */
  --c: red;
  
  height: 100px;
  border-right: var(--b) solid var(--c);
  background: linear-gradient(var(--c) 0 0) right 10px bottom 0/var(--b) 50% no-repeat
}
    <div class="box"></div>