1. Использовать border-image с gradient и анимировать его.
2. Использовать блоки :before и :after. У основного блока бордеры заданы так - левый и верхний серые, правый и нижний нужного вам цвета. Блок :before с нулевыми размерами, position: absolute в левый верхний угол, верхний и левый бордеры нужного вам цвета, блок :after в правый нижний угол, ширина и высота по родительскому блоку, цвет бордера серый.
При наведении анимируете размеры блока :before до 100% родительского блока, блока :after до 0. Задержку анимации блока :after делаете такой, чтобы она начинала срабатывать сразу после завершения анимации :before.
Получится, что блок :before расширяясь зальет бордером нужного цвета левую и правую стороны, а блок :after сжимаясь уберет серый бордер и откроет лежащий внизу бордер нужного цвета справа и внизу.