finally found a way to make those boring solid borders look less depressing. i've been avoiding border-image because it's such a pain when you need rounded corners and the whole thing just breaks.
>they don't curve to border shapesit's true though, that limitation is annoying as hell. but using a single linear-gradient as the source for the animation makes it much more efficient than trying to swap out heavy assets. i saw someone using temani afif's mask approach for smoother curves lately, but sticking to the slice property seems way simpler if you don't need complex shapes.
.card { width: 150px; aspect-ratio: 0.69; border-image-source: linear-gradient(-45deg, red 0%, transparent 0%);}the idea of just animating the gradient position to get a traveling light effect is pretty clever for low-effort polish. it's basically just playing with background-position logic but applied to the border edges instead. i wonder if the performance hit becomes noticeable once you have dozens of these cards on a single page. does anyone use this for anything besides simple decorative accents?
found this here:
https://css-tricks.com/animating-css-border-image/