Más control sobre los bordes CSS con imagen de fondo

Puedes hacer un CSS típico bordercon guiones o puntos. Por ejemplo:

.box {   border: 1px dashed black;   border: 3px dotted red;}

No tienes mucho control sobre el tamaño o la longitud de los guiones o espacios. ¡Y ciertamente no puedes darles inclinación, desvanecimiento o animación a los guiones! Sin embargo, puedes hacer esas cosas con algunos trucos.

Amit Sheen construyó este fantástico generador de bordes discontinuos:

El truco consiste en utilizar cuatro fondos múltiples. La backgroundpropiedad toma valores separados por comas, por lo que al establecer cuatro fondos (uno en la parte superior, derecha, inferior e izquierda) y dimensionarlos para que parezcan un borde, se desbloquea todo este control.

Like so:

.box {  background-image: repeating-linear-gradient(0deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(90deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(180deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px), repeating-linear-gradient(270deg, #333333, #333333 10px, transparent 10px, transparent 20px, #333333 20px);  background-size: 3px 100%, 100% 3px, 3px 100% , 100% 3px;  background-position: 0 0, 0 0, 100% 0, 0 100%;  background-repeat: no-repeat;}

Me gustan las gomitas.