JSFiddle - React, Tailwind, and code Playground

by Tyriar

HTML

<div class="borders">
    <div class="plain-border"></div>
    
    <div class="container-rect-border">
        <div class="inner"></div>
    </div>
    
    <div class="pseudo-border"></div>
</div>

CSS

.plain-border {
    border-top:10px solid #C77;
    border-bottom:10px solid #C77;
    border-left:10px solid #FAA;
    border-right:10px solid #FAA;
}

.container-rect-border {
    border-top:10px solid #C77;
    border-bottom:10px solid #C77;
}
.container-rect-border .inner {
    border-left:10px solid #FAA;
    border-right:10px solid #FAA;
}

.pseudo-border {
    border-top:10px solid #C77;
    border-bottom:10px solid #C77;
    position:relative;
    /* pad out the left and right to allow room for the border */
    padding:0 10px;    
}
.pseudo-border:before,
.pseudo-border:after {
    position:absolute;
    top:0;
    bottom:0;
    width:10px;
    background-color:#FAA;
    display:block;
    content:"";
}
.pseudo-border:before {
    left:0;
}
.pseudo-border:after {
    right:0;
}

/* presentation stuff */
.borders > div {
    width:100px;
    height:100px;
    float:left;
    margin:1em;
}
.container-rect-border {
    width:120px!important;
}
.container-rect-border .inner {
    height:100px;
}