Custom dashed border

HTML

<div>2222 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi itaque, fuga commodi in. Aliquam soluta deserunt dicta illum quis natus unde recusandae distinctio quos? Ipsam rerum quasi repellendus eaque error?</div>

CSS

body {
    background: #222;
}

div {
    --border-color: #5ba741;
    --border-weight: 2px;
    --dash-size: 8px;
    --gap-size: 8px;
    
    position: relative;
    margin: 60px;
    width: 300px;
    background: #333;
}

div:after {
    transition: all .6s ease;
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) top left no-repeat,
        linear-gradient(90deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) top center repeat-x,
        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) top right no-repeat,
        
        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) top left no-repeat,
        linear-gradient(0deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) center left repeat-y,
        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) bottom left no-repeat,
        
        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) bottom left no-repeat,
        linear-gradient(90deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) bottom center repeat-x,
        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) bottom right no-repeat,
        
        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) top right no-repeat,
        linear-gradient(0deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2),...