How To Animated Rounded Dashed Border?

I have a situation I have to make a half rounded border which is dashed border. Now can I animate border. Please help

Solution 1:

Thanks for your answer I got the solution -

.line-box {
    top:10px;
    left: 10px;
    overflow: hidden;
    position: absolute;
    display: block
}

.line-box svg {
    position: relative;
    top: -24px;
}
.path {
  animation: dash 20s linear  infinite;
  -moz-animation: dash 20s linear  infinite;
  -webkit-animation: dash 20s linear  infinite;
  -o-animation: dash 20s linear  infinite;
  -ms-animation: dash 20s linear  infinite;
}


@keyframes dash {
  from {stroke-dashoffset: 0;}
  to {stroke-dashoffset: 2000;}
}
@-moz-keyframes dash {
  from {stroke-dashoffset: 0;}
  to {stroke-dashoffset: 2000;}
}
@-webkit-keyframes dash {
  from {stroke-dashoffset: 0;}
  to {stroke-dashoffset: 2000;}
}
@-o-keyframes dash {
  from {stroke-dashoffset: 0;}
  to {stroke-dashoffset: 2000;}
}
@-ms-keyframes dash {
  from {stroke-dashoffset: 0;}
  to {stroke-dashoffset: 2000;}
}

<div class="line-box">
 <svg height="70" width="400">
  <path d="M167,1 h181 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-50 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#fff" stroke-width="1"/>
  <path stroke-dasharray="6,6" d="M167,1 h181 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-50 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#000" stroke-width="1" class="path"/>

  <path d="M21,2 h273 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-271 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#fff" stroke-width="1"/>
  <path stroke-dasharray="6,6" d="M21,2 h273 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-271 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#000" stroke-width="1" class="path"/>
 </svg> 
</div>

Solution 2:

Well, I tried to achieve that, what I guess you wanted to achieve, and here is my result. I could have misunderstood you, but anyway, it was worth trying, and I know, it doesn't look good on the corners.

By the way, I think that you just wanted to make "moving border", if so, I just wanted to tell you that it's not possible (yet?) with like one CSS property, but you can cheat a little with multiple boxes and animations.

Correct me if I'm wrong ;)

If you need different settings, remember to change top, bottom, right and left properties in .box CSS to match your borders.

.box-container{
  position: relative;
  overflow: hidden;
  height: 47px;
}

.wrapper {
  height: 90px;
  width: 500px;
  background: #ffb08f;
  border: 1px solid #fff;
  border-radius: 30px;
  animation: 1s borderAnimOne infinite;
  position: relative;
  top: -45px;
}

.box {
  height: 90px;
  border: 1px dashed #000;
  border-radius: 30px;
  position: absolute;
  animation: 1s borderAnimTwo infinite;
  left: -1px;
  right: -1px;
  top: -1px;
  bottom: -1px;
}

@keyframes borderAnimOne {
  0% {
    border-color: #fff;
  }
  50% {
    border-color: #000;
  }
  100% {
    border-color: #fff;
  }
}

@keyframes borderAnimTwo {
  0% {
    border-color: #000;
  }
  50% {
    border-color: #fff;
  }
  100% {
    border-color: #000;
  }
}

<div class="box-container">
  <div class="wrapper">
    <div class="box"></div>
  </div>
</div>