Ribbon Menu Needs Dashed Border

So I am using the Genesis Framework along with a child theme, and wanted to create a ribbon menu with the ::before and ::after borders, which was a really neat affect. I really love the way this is looking, although I need to have a stitch going through the ends. The ribbon ends are done using a border, here is an example:

.nav-primary:before {
position: absolute;
display: block;
border: 1.9em solid #8fddde;
margin-top: -6px;
width: 10px;
margin-left: -40px;
border-left-color: transparent;
}

.nav-primary:after {
position: absolute;
display: block;
border: 1.9em solid #8fddde;
margin-top: -71px;
width: 10px;
border-right-color: transparent;
margin-left: 965px;
}

Since the ends are created using a border, I don’t know how to overlap that with a border. I want the entire menu to have a border (1px dashed white) to make it have the appearance of being stitched to the page. I have no idea how to add an overlapping border, though!

Please Help!