Implementierung der CSS-Rahmenlängensteuerungsfunktion

<div Klasse="Inhaltsblock">
<div Klasse="Box-Container">
<div class="border-top">Rand oben</div>
</div>
<div Klasse="Box-Container">
<div class="border-left">Rand links</div>
</div>
<div Klasse="Box-Container">
<div class="border-right">Rand rechts</div>
</div>
<div Klasse="Box-Container">
<div class="border-bottom">Rahmen unten</div>
</div>
</div>

.box-container {
    Position: relativ;
    Breite: 90%;
    Farbe: #777;
}
.border-top {
    Hintergrund: #b4bcbf;
    Polsterung: 15px;
}
    .border-top:vor {
        Inhalt: '';
        Position: absolut;
        links: 42%;
        oben: 0;
        unten: automatisch;
        rechts: auto;
        Höhe: 7px;
        Breite: 50%;
        Hintergrundfarbe: #8796a9;
    }
.border-links {
    Hintergrund: #dfdad6;
    Polsterung: 15px;
}
    .border-left:vor {
        Inhalt: '';
        Position: absolut;
        links: 0;
        oben: 6%;
        unten: automatisch;
        rechts: auto;
        Höhe: 52%;
        Breite: 5px;
        Hintergrundfarbe: #a89d9e;
    }
.border-rechts {
    Hintergrund: #eee9c4;
    Polsterung: 15px;
}
    .border-right:nach {
        Inhalt: '';
        Position: absolut;
        links: auto;
        oben: automatisch;
        unten: 5px;
        rechts: 0;
        Höhe: 52%;
        Breite: 5px;
        Hintergrundfarbe: #f39c81;
    }
.border-bottom {
    Hintergrund: #bcdc9d;
    Polsterung: 15px;
}
    .border-bottom:nach {
        Inhalt: '';
        Position: absolut;
        links: 18px;
        oben: automatisch;
        unten: 0;
        rechts: auto;
        Höhe: 6px;
        Breite: 105px;
        Hintergrundfarbe: #32b66b;
    }