Code
<style> div { width:100px; height:100px; background:green; position: relative; } div:before{ content:''; position:absolute; top:-5px; bottom:-5px; right: -5px; left: -5px; border: 5px solid #ff0088; animation:myfirst 5s linear infinite; /* Safari and Chrome */ } @keyframes myfirst { 0%,100%{Clip: RECT (0px, 110px, 5px, 0px);} 25% {Clip: RECT (0px, 110px, 110px, 105px);} 50% {Clip: RECT (105px, 110px, 110px, 0px);} 75 % {Clip: RECT (0px, 5px, 110px, 0px);} } </ style> </ head> <body> <P> <B> Note: </ b> in this example and earlier IE Internet Explorer 9 version is invalid. </ P> <div> </ div> </ body>
Results pictures: