JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>Border Test</title>
</head>
<body>
    <div class="b1"></div>
    <div class="b2"></div> 
</body>
</html>

CSS

DIV {
    border: 15px dotted #000;
    border-radius: 50px;
    width: 150px;
    height: 100px;
    background-color: #ccc;
    margin: 15px;
    -webkit-transition: width 2s; 
       -moz-transition: width 2s;  
        -ms-transition: width 2s;  
         -o-transition: width 2s;  
            transition: all 2s; 
    }

DIV:hover {
    width: 300px;
    height:300px;
    }

.b1 {
    border-style: dotted;
    }

.b2 {
    border-style: dashed;
    }