How to fix such a border?

Question

css

Hello, there is a similar code.
https://codepen.io/anon/pen/jZPyMz
It is necessary that the green picture be cut off along the border (gray block) and be, as it were, under it.

Answer 1

https://jsfiddle.net/f24ozu0z/

.second {
  position: relative;
  height: 300px;
  margin-top: -150px;
  background: radial-gradient(100% 50% at center top, transparent 49.8%, gray 50.2%);
  z-index: 2;
}

You can still play with the gradient, align

Answer 2

:after {
   z-index: 1;
}