Q:

border-style gradually expanding css

I want to make border gradually expand, though i can't figure out where is the problem. Would really appreciate the help.
    #green1 {
background-color: green;
width: 50%;
height: 10%;
float: right;
}
    #green1:hover  {
    animation-name:border;
    animation-duration:3s;}

@keyframes border {

0% {
    border:0px;
    border-style:none;}
15% {  border:1px solid black; border-style:dotted;}
35% {  border:2px solid black; border-style:dotted;}
50% {  border:4px solid black; border-style:dotted;}
75% {  border:6px solid black; border-style:dotted;}

100% {  border:8px solid black; border-style:dotted;}}

A:

It's a bad idea to specify and replace value in the same row. It doesn't make sense(you specify solid border and that reassign it to be dotted). Also your border is absent at the initial state which might be a problem.

#green:hover  {
  display: inline-block;
  border: 0px dotted black;
  animation: border 3s;
}

@keyframes border {
0% {  border-width:0px;}
15% {  border-width:1px;}
35% {  border-width:2px;}
50% {  border-width:4px;}
75% {  border-width:6px;}
100% {  border-width:8px;}
}
<div id="green">Some text</div>

