Explaining this concept is actually quite simple if you take a moment to think about it.
Let's start by understanding how borders are displayed.
First, consider a basic border with a black border of 10px and a green background:
As expected, the border looks normal. Now, let's examine the same border with different colors on each side:
You'll notice that the borders are evenly drawn, meeting at an angle where they intersect.
In your specific case, the border is defined as border: 40px solid green;. This means the entire border is 40px wide and green. To illustrate, here's a shape with exaggerated borders, with both width and height set to 0:
Now, if we make the left border transparent, only the top, right, and bottom borders will display the selected color (either green in my example or red in yours).
Let's proceed to (A) make some adjustments to the border's size by enlarging the top and bottom borders slightly more than the left and right ones.
Next, (B) we can set the top, right, and bottom borders to the same color.
Lastly, (C) after resizing the shape to match your image, we will nest it inside another div using the :after tag, placing it at the end of the current container.
And there you have it - an overview of borders.
View the example fiddle demonstrating each step.