How do I create a two color border with offset border lines?

January 16, 2023

I want to create border for the card like that:

And border on card hover:

Here is my code example:

  <div class="apps-card">
    <div class="card-body">
    </div>
  </div>

    .apps-card {
    height: 300px;
    width: 250px;
    position: relative;
    overflow: hidden;
    margin-left: 200px;
    margin-top: 200px;
    background: rgb(2,0,36);
    background: linear-gradient(129.8deg, purple 50%, rgba(9,121,120,1) 50%);
    
    .card-body {
        position: absolute;
        left: 4px;
        right: 4px;
        bottom: 4px;
        top: 4px;
        background-color: #fff;
    }
}

But I noticed: If I change the card width – border does not fit for a card and has wrong position. How to create a responsive border or any other ways to create a border like in the image with hover transformation?

>Solution :

Here is an idea using multiple background:

.box {
  --o: 25px; /* the offset */
  
  width: 300px;
  height: 200px;
  border: 1px solid #0000;
  box-sizing: border-box;
  background:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient( 90deg, blue calc(var(--o) + 1px),red 0) 
     100% 0 / calc(100% + var(--o)) 51% border-box,
    linear-gradient(-90deg, red calc(var(--o) + 1px),blue 0) 
     0 100% / calc(100% + var(--o)) 51% border-box;
  background-repeat: no-repeat;
  transition: .3s;
}

.box:hover {
  border-width: 4px;
  background-position: 0 0, 0 0,100% 100%;
}