JSFiddle - React, Tailwind, and code Playground

by exercices

HTML

<div class="formes carre">
</div>
<br>
<div class="formes rectangle">

</div>

CSS

.formes {
  border-radius: 10px;
  padding:2px;
  --dashed: transparent 0, transparent 6px, black 6px, black 12px;
  background:
    repeating-linear-gradient( 0deg , var(--dashed)) 0 0 repeat-y,
    repeating-linear-gradient( 0deg , var(--dashed))100% 0 repeat-y,
    repeating-linear-gradient( 90deg , var(--dashed)) 0 0 repeat-x,
    repeating-linear-gradient( 90deg , var(--dashed)) 0 100% repeat-x;
  background-size:
    3px 200%,
    3px 200%,
    200% 3px,
    200% 3px;
  animation: slide 3s linear infinite;
}
@keyframes slide {
  to {
    background-position:
      0 100% ,
      100% -100%,
      -100% 0,
      100% 100%
      
  }
}

.carre{
  height: 100px;
  width: 100px;
}

.rectangle{
  height: 100px;
  width: 200px;
}