This page uses CSS Grid Layout. If you are reading this message, your browser does not support this feature and you may not be able to see a grid of example boxes. You can check the browser compatibility here.

Simple Animations using CSS Borders

Hover your mouse on the examples below to see the effect.

1. Interchange border colors

2. Expand width

3. Expand width & height

4. Rotate border colors using keyframe animations

5. Four colored circle

6. Two colored triangle

7. Two colored square

8. Missing top border

9. Down Arrow

10. Left Arrow

11. Up Arrow

12. Right Arrow