Fancy Borders

I'm seeing fancy borders everywhere recently, so I wanted to go try out different ways on this again and see what we can do

v1, as css-tricks suggests, use 'border-image' - this is nice and simple but doesn't work with 'border-radius'

As I tried out in /Secrets Lea Verou has a clever way of achieving this - with a transparent border. and using two gradients in the background with 'padding-box' and 'border-box' properties.

this is cool as it uses the 'linear-gradient' which we can also animate

lets try that with a repeating gradient that goes in one direction

now lets get fancy with the border - now we can use a radial gradient and make it follow the mouse with this handy little package I happen to know css-var-animate