banded border on circular element

by Henry

HTML

<div>
  <img src="//unsplash.it/200x200" alt="">
</div>

SCSS

img {
  background: #ccc;
  border-radius: 50%;
  height: 100%;
  width: 100%;
}

div {
  $stripeHalfWidth: 10px;
  
  background: linear-gradient(45deg, #eee, #eee calc(50% - #{$stripeHalfWidth}), #000 calc(50% - #{$stripeHalfWidth}), #000 calc(50% + #{$stripeHalfWidth}), #777 calc(50% + #{$stripeHalfWidth}), #777); 
  border-radius: 50%;
  height: 100px;
  padding: 10px;
  width: 100px;
}