Issue in CSS perspective

I created this snippet using css perspective which I am going to use in a project, but I have a problem with the first row of boxes.

In the first row of boxes, I need top borders lines of each box to be curved like bottom borders lines. Like the second row, which is curved from both [top & bottom].

Some of what I used:

-webkit-perspective: /* Chrome, Safari, Opera */
-webkit-perspective-origin: /* Chrome, Safari, Opera */
perspective:
perspective-origin:

And my snippet link is here.

Thanks.