Comment créer une forme avec des bordures?

Question

Je souhaite créer un élément graphique noir avec une bordure positionnée au-dessus du flux vidéo illustré.

J'ai essayé d'utiliser: avant et: après mais la frontière complique les choses. Toute aide serait grandement appréciée.

Vous pouvez voir sur la photo que l'alimentation va en dessous de la frontière, puisque l'élément graphique est actuellement un carré avec un rayon de frontière

Le code ci-dessous est comment j'ai créé la forme comme sur la photo, mais il est défaillent, puisque l'alimentation passe au-dessus de la frontière:

div.wrap1{ 
    position: fixed; 
    height: 90vh; 
    bottom: 0; 
    left: 0; 
    width: 80vw; 
    margin-left: -120px; 

    .graphic-bg-1{ 
     z-index: 5; 
     border: 3px solid #3AD8FF; 
     border-bottom: none; 
     border-radius: 120px; 
     position: relative; 
     width: 100%; 
     height: 100%; 
    } 

    .mask{ 
     position: absolute; 
     height: 500px; 
     width: 100%; 
     background-color: black; 
     bottom: 0; 
     // margin-left: -120px; 
     z-index: 6; 
    } 
} 

div.wrap2{ 
    position: fixed; 
    height: 75vh; 
    width: 100vw; 
    right: 0; 
    bottom: 10vh; 
    margin-right: calc(-80vw + 123px); 
    z-index: 7; 

    .graphic-bg-2{ 
     z-index: 8; 
     border: 3px solid #3AD8FF; 
     border-top: transparent; 
     border-radius: 120px; 
     position: relative; 
     width: 100%; 
     height: 100%; 
    } 

    .mask2{ 
     position: absolute; 
     height: 109px; 
     width: calc(100% - 3px); 
     background-color: black; 
     top: 0; 
     right: 0; 
     z-index: 8; 
    } 
} 

Answer 1

<div class="first-element"></div> 
<div class="secound-element"></div> 

.first-element{ 
    width: 150px; 
    height: 100px; 
    margin-top: 20px; 
    border-top: 1px solid #000; 
    border-right: 1px solid #000; 
    border-top-right-radius: 30px; 
    float:left; 
} 
.secound-element{ 
    float:left; 
    width: 150px; 
    height: 100px; 
    margin-top: 70px; 
    border-bottom: 1px solid #000; 
    border-left: 1px solid #000; 
    border-bottom-left-radius: 30px; 
    margin-left:-1px; 

} 

Try this it might helpful