Custom dashed border

by javad ebrahimi

HTML

<div></div>

CSS

body {
    background: #222;
}

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

div:hover {
    --border-color: #f09;
    --border-weight: 1px;
    --dash-size: 5px;
    --gap-size: 5px;
}

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...