![A series of images of an avatar doing a bunch of skateboard tricks.](https://res.cloudinary.com/dnpmdb8r8/video/upload/w_250,f_auto,c_limit,q_auto,w_auto/v1673498930/argyleink/olliolli.gif)
notecss
A gradient border image, transparent at the edges, looks like it thins out as it fades out.
.effect {
border-image:
linear-gradient(
transparent,
var(--indigo-6),
transparent
)
1 / 4px /* slice n' size */
;
}
![example with the effect on inline borders](https://res.cloudinary.com/dnpmdb8r8/image/upload/f_auto,c_limit,q_auto,w_auto/argyleink/border-image-trick-1.png)
![example with the effect on block borders](https://res.cloudinary.com/dnpmdb8r8/image/upload/f_auto,c_limit,q_auto,w_auto/argyleink/border-image-trick-2.png)