JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="so1" ></a>
<a href="#" id="so2" ></a>

CSS

a{
    background:url('http://2.bp.blogspot.com/--LuK5VmWRbA/Us10u3dgvEI/AAAAAAAAADQ/he_utE7FDtg/s1600/css3_logo_wide.png') 50% 50% no-repeat;
    background-size:100%;
    -webkit-background-size:100%;
    -moz-background-size:100%;
    background-origin:border-box;
    display:block;
    float:left;
    width:150px;
    height:150px;
    border-width:50px;
    border-color: rgba(0,0,0,0);
    border-radius:100%;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
}
a:hover{
    border-width:0;
    border-color:rgba(0,0,0,0.5);
}
#so1{
    border-style:solid;
}
#so2{
    border-style:dotted;
}