Как создать анимацию рисования границ для div, как в примере с svg, используя css при загрузке страницы?

Question

Мне нужно создать анимацию рисования границ для test div, как анимацию границы svg с использованием css? Анимация границы работает для svg, но анимация границы div не работает, так какой переход я должен использовать для создания границы анимации для div?

      .test {
        position: relative;
        background: transparent;
        text-align: center;
        color: black;
        float: left;
        border-radius: 0.3em;
        margin: 0.2em;
        padding: 0em;
        width: 3.3em;
        height: 100%;
        box-sizing: border-box;
        cursor: pointer;
        -webkit-user-select: none;
    	transition: fill .9s ease;
      	stroke-dasharray: 1000;
      	stroke-dashoffset: 1000;
      	animation: dash 10s normal forwards ;
    }
    
    @keyframes dash {
      100% {
        transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
    
      }
    }
    
    .svgborder svg {
      display: block;
      fill: ;
      transition: fill .9s ease;
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: svganimation 15s normal forwards ;
      
    }
    
    @keyframes svganimation {
      to {
        stroke-dashoffset: 0;
      }

}

 <div class="test">test</div> <br>

    <div class="svgborder">
    <svg width="400" height="110">
      <rect width="300" height="100" style="fill:red;stroke-
      width:3;stroke:rgb(0,0,0)" />
    </svg>   
    </div>