Sample code sharing on how to control CSS border lengths

CSS Border length control

CSS border length control. I used to nest with P when I needed the border length to be smaller than the container. Later found that the pseudo-class in the implementation of this effect is very convenient, only need a p is enough, in addition to adjust padding and margin will not be very troublesome.

Border Top

Border left

Border right

Border Bottom

. box-container {position:relative;    width:90%; Color: #777;}.    border-top {background: #b4bcbf;    padding:15px;}        . border-top:before {content: ';        Position:absolute;        left:42%;        top:0;        Bottom:auto;        Right:auto;        height:7px;        width:50%;    Background-color: #8796a9;    }.border-left {background: #dfdad6;    padding:15px;}        . border-left:before {content: ';        Position:absolute;        left:0;        top:6%;        Bottom:auto;        Right:auto;        height:52%;        width:5px;    Background-color: #a89d9e;    }.border-right {background: #eee9c4;    padding:15px;}        . border-right:after {content: ';        Position:absolute;        Left:auto;        Top:auto;        bottom:5px;        right:0;        height:52%;        width:5px;    Background-color: #f39c81;    }.border-bottom {background: #bcdc9d;    padding:15px;}   . border-bottom:after {     Content: ";        Position:absolute;        left:18px;        Top:auto;        bottom:0;        Right:auto;        height:6px;        width:105px;    Background-color: #32b66b; }

Effects such as: