Wie man Form mit Grenzen schafft?

Question

Ich möchte ein schwarzes grafisches Element mit einem Rahmen erstellen, der über dem abgebildeten Videofeed positioniert ist.

Ich habe versucht mit: vor und nach, aber die Grenze kompliziert die Dinge. Jede Hilfe würde sehr geschätzt werden.

Sie auf dem Foto sehen kann, dass das Futter unter der Grenze geht, da das grafische Element zur Zeit ein Quadrat mit einem Grenzradius ist

Der Code unten ist, wie ich die Form erstellt, wie dargestellt, aber es ist fehlerhaft, da geht das Futter über die Grenze:

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