JSFiddle - React, Tailwind, and code Playground

HTML

<img class="method original" src="http://placehold.it/250/000/fff/?text=BG+Bleed" />
<hr>
<span class="method-1">
    <img src="http://placehold.it/250/000/fff/?text=Method+1" />
</span>
<img class="method-2" src="http://placehold.it/250/000/fff/?text=Method+2" />
<img class="method-3" src="http://placehold.it/250/000/fff/?text=Method+3" />

CSS

body {
  background-color: red;
  text-align: center;
  }

hr {}

img, span {
    display: inline-block;
    border-radius: 50%;
    box-sizing: border-box;
    vertical-align:top;
}

.original {
    border: 15px solid black;
}

.method-1 {
    border-radius: 50%;
    display: inline-block;
    background-color: #000;
    padding: 15px;
}

.method-2 {
    border-radius: 50%;
    border: 15px solid #000;
    background-color: #000;
}

.method-3 {
    background-color: #000;
    border-radius: 50%;
    padding: 15px;
}

/* For Display */

[class*="method"] {
  margin: 15px;
}

[class^="method"] {
    -webkit-transition: all .15s ease;
            transition: all .15s ease;
}

[class^="method"]:hover {
    border-color: #fff;
    background-color: #fff;
}