Solution 1 :

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="">

Problem :

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.


#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 "].'" 
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>


Comment posted by Michael.Lumley

Your fiddle looks like a white border with an orange background to me…

Comment posted by Richard batsbak

@Michael.Lumley Should I add a picture how it looks on my site?

Comment posted by tacoshy

if you intend to achieve an result like the picture, then you make it way more complicated then it has to be. You could simply use a box shadow with an offset and wouldnt require pseudo elements then.

Comment posted by Michael.Lumley

No, I realized that I was looking at the background color of your page, not an actual border.

Comment posted by Dominic van der Pas

What exactly are you trying to achieve? You have an orange border that blends in with the background colour, but that’s not what you’re after?