Rotating dashed border

Hover over target to trigger animation

Re: maxart: I’d be really interested to know how people would replicate this (animated drop target) with web technologies / @deaxon ? @desandro ?

See Benjamin De Cock’s solution.


  • No images
  • Only one animation declation


  • No rounded corners
  • WebKit only
  • Border dashes are in sync only when the dimensions of the target are a multiple of 30. Probably won’t be in sync for other browsers who render dashed borders differently.
  • Requires additional tag inside border element