Wie werden zwei untere Ränder von div overlay erstellt?

Question

Im Folgenden sind mein HTML und CSS-Code

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    border-bottom-width: 2px; 
 
    border-bottom-color: gray; 
 
    border-bottom-style: solid; 
 
} 
 

 
.label { 
 
    border-bottom-width: 2px; 
 
    border-bottom-color: orange; 
 
    border-bottom-style: solid; 
 
}

<div class=container> 
 
    <div class=label> 
 
    Hello 
 
    </div> 
 
</div>

Es ist das aktuelle Ergebnis:

Mein ideales Ergebnis ist jedoch die orange Farbe Grenze zu haben, Overlay die graue Grenze der .container div. Hier ist eine Illustration.

Ich habe das bereinigte padding und margin versucht, aber ich kann meine gewünschte Ergebnis nicht erzielen, da offensichtlich Veränderungen Arbeiten wird die Größe des Behälters als auch ändern.

Ist es möglich, es mit CSS zu erreichen?

Answer 1

negativ margin-bottom auf .label gleich In den border-bottom-width von .container und etwas links/rechts padding falls erforderlich:

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    border-bottom-width: 2px; 
 
    border-bottom-color: gray; 
 
    border-bottom-style: solid; 
 
} 
 

 
.label { 
 
    border-bottom-width: 2px; 
 
    border-bottom-color: orange; 
 
    border-bottom-style: solid; 
 
    padding: 0 10px; 
 
    margin-bottom: -2px; 
 
}

<div class=container> 
 
    <div class=label> 
 
    Hello 
 
    </div> 
 
</div>