CSS border not showing when background-coloris added

I have written a code that works great for me. So I have a (half) border around my picture. like the picture below. But when I add a background-color the line dissapears.

Now I want the oppiste colors but there for I need a background-color. So I did that but now the border isn’t showing anymore. So I want a white line with an orange background. There are 3 files. The CSS file, The PHP file u can see here and a file where they get together.

My PHP/HTML

#about {
    background-color: #EF7F19;
    color: white;
}

#about .about {
    flex-direction: column-reverse;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 20px;
}

#about .col-left {
    width: 250px;
    height: 360px;
}

#about .col-right {
    width: 100%;
}

#about .col-right h2 {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.2rem;
    margin-bottom: 10px;
}

#about .col-right p {
    margin-bottom: 20px;
}

#about .col-left .about-img {
    height: 100%;
    width: 100%;
    position: relative;
    border: 10px solid #EF7F19;
}

#about .col-left .about-img::after {
    content: '';
    position: absolute;
    left: -33px;
    top: 19px;
    height: 98%;
    width: 98%;
    border: 7px solid white;
    z-index: -1;
}

@media only screen 
    and (min-width:768px) {
    #about .about {
        flex-direction: row;
    }
    
    #about .col-left {
        width: 600px;
        height: 400px;
        padding-left: 60px;
    }
    
    #about .about .col-left .about-img::after {
        left: -45px;
        top: 34px;
        height: 98%;
        width: 98%;
        border: 10px solid white;
    }
    
    #about .col-right {
        text-align: left;
        padding: 30px;
    }
    
    #about .col-right h1 {
        text-align: left;
    }
}

echo ' <section id="about">'; 
echo '   <div class="about container">'; 
echo '     <div class="col-left">'; 
echo '       <div class="about-img">'; 
echo '         <img src="'. $row[" AboutLocation "].'" 
                    alt="img">'; 
echo '       </div>'; 
echo '     </div>'; 
echo '     <div class="col-right">'; 
echo '       <h1 class="section-title" 
                    style="color: white;">Over ons</h1>'; 
echo '       <h2>Adisol</h2>'; 
echo '       <p>'. $row["AboutUsText"].'</p> '; 
echo '     </div>
            </div>
        </section>';

Answer

Like I said already in the comment. The use of box-shadow would be the easier approach to achieve the wanted design. That way you dont need pseudo elements. you can use 2 box shadows with a vertical and horizontal offset.

Lets go through the code and see how it actually works:

1st: you need a border aroudn your image. specifiy the border as white solid with a thickness of your liking.

2nd: We need an orange frame which we’ll get by using the box-shadowattribute with 2 values that are seperated with a comma.

3rd: lets start with the second and last value: -30px 30px 0 0 orange the first number is the horizontal offset which will move the frame 30px to the left. The second number is the vertical offset which moves the frame 30px to the bottom. The third number is the blur value. With 0 it will be a solid color. The fourth and last number is the size. With 0 it has the exact same size as the picture.

4th: To prevent that the whole shadow displays as an orange block, we need to put another box shadow value in front of it. We give it the same offset and blur value. The fourth number we change however. We change it to a negative value of the intended “frame” thickness. In this case -10px which will make the “frame” 10px thick.

img {
  width: 50%;
  float: right;
  border: 10px solid white;
  box-shadow: -30px 30px 0 -10px white,
              -30px 30px 0 0 orange;
}

/* for demonstration only */

img {
  margin-bottom: 100px;
}

<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">