At the stylesheet, just add a keyframe, setting the border-color property and timed at the 50% of the animation.

Also, at the blinking element class, use the animation property, with the keyframe above, the blinking duration you want, timing function at step-end, iteration count infinite and direction alternate.

Because of only prefixed CSS animation element support at the most browsers for the moment,
it’s highly recomended to use the -prefix-free script from Lea Verou, to write pure unprefixed CSS3 code and support all major browsers, until they closely aligned with the CSS3 standards.

For the moment, that support @keyframe and animation CSS elements (even in the prefixed format) are the latest versions of Firefox, Chrome and Safari.

2 thoughts on “Blink Element’s Border the CSS way”

I googled “css border blink” but I actually wanted to make my own “Guru meditation” page.
I couldn’t believe I stumbled upon this post where you use it as a CSS border blink example!
It seems I’m not the only Amiga nostalgic around.
Thanks!