JSFiddle - React, Tailwind, and code Playground

by KCarnaille

HTML

<div class="round">
    <div class="round_bis">
    </div>
</div>

CSS

.round{
    width:250px;
    height:50px;
    border:5px solid #ccc;
    margin:45px auto;
    background-color:grey;
    -moz-transition:all 0.5s ease;
	-ms-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	transition:all 0.5s ease;
    position: relative;
}

.round_bis{
    border: 5px dashed transparent;
     -moz-transition:all 0.5s ease;
	-ms-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	transition:all 0.5s ease;
    width: 250px;
    height:50px;
    position: absolute;
    left: -5px;
    top: -5px;
}
.round:hover{
    border-color: transparent;
}

.round:hover .round_bis{
    border-color: blue;
}