css写特好看边框

html代码：

<div class="modal-box">
    <!--左上边框-->
    <div class="t_line_box">
        <i class="t_l_line"></i>
        <i class="l_t_line"></i>
    </div>
    <!--右上边框-->
    <div class="t_line_box">
        <i class="t_r_line"></i>
        <i class="r_t_line"></i>
    </div>
    <!--左下边框-->
    <div class="t_line_box">
        <i class="l_b_line"></i>
        <i class="b_l_line"></i>
    </div>
    <!--右下边框-->
    <div class="t_line_box">
        <i class="r_b_line"></i>
        <i class="b_r_line"></i>
    </div>
</div>

css代码：

.l_t_line {
    width: 5px;
    height: 24px;
    left: -3px;
    top: -3px;
}
 
.t_l_line {
    height: 5px;
    width: 26px;
    left: -3px;
    top: -3px;
}
 
.t_line_box {
    position: absolute;
    width: 100%;
    height: 100%;
}
 
.t_line_box i {
    background-color: #4788fb;
    box-shadow: 0px 0px 10px #4788fb;
    position: absolute;
}
 
.t_r_line {
    height: 5px;
    width: 26px;
    right: -3px;
    top: -3px;
}
 
.r_t_line {
    width: 5px;
    height: 24px;
    right: -3px;
    top: -3px;
}
 
.l_b_line {
    width: 5px;
    height: 24px;
    left: -3px;
    bottom: -3px;
}
 
.b_l_line {
    height: 5px;
    width: 26px;
    left: -3px;
    bottom: -3px;
}
 
.r_b_line {
    width: 5px;
    height: 24px;
    right: -3px;
    bottom: -3px;
}
 
.b_r_line {
    height: 5px;
    width: 26px;
    right: -3px;
    bottom: -3px;
}
 
.modal-box {
    position: relative;
    background-color: rgba(21,14,104,0.6);
    box-sizing: border-box;
    border: 1px solid #2C58A6;
    box-shadow: 0px 0px 10px rgb(59,150,248) inset;
}