Sample code sharing on how to control CSS border length

CSS border length control

CSS border length control. In the past, when the border length needed to be smaller than the container, I used p nesting. Later I found that pseudoclass is very convenient to achieve this effect. Only one p is enough. In addition, it will not be troublesome to adjust padding and margin.

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;
    }

The effect is as follows:

The above is the detailed content of Sample code sharing on how to control CSS border length. For more information, please follow other related articles on the PHP Chinese website!