221V
/
some_codepens


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3 shapes - CSS Gradient Rounded Borders</title>
<style>
body {
  display: flex;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  min-height: 100vh;
  margin: 0;
  background-image: linear-gradient(#111, #050505);
  --img-url: url(https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=350&h=350&fit=crop&crop=faces);
}

.headshot {
  flex-shrink: 0;
  margin: 20px;
  height: calc(150px + 6vw);
  width: calc(150px + 6vw);
  border: calc(8px + 0.2vw) solid transparent;
  background-origin: border-box;
  background-clip: content-box, border-box;
  background-size: cover;
  box-sizing: border-box;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
}

.headshot-1 {
  border-radius: 30%;
  background-image: var(--img-url), linear-gradient(#f9f047, #0fd850);
}

.headshot-2 {
  border-radius: 50%;
  background-image: var(--img-url), linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
}

.headshot-3 {
  border-radius: 50% 10%;
  background-image: var(--img-url), linear-gradient(to bottom left, #f83600, #f9d423);
}
</style>


</head>
<body>

<div class="headshot headshot-1"></div>
<div class="headshot headshot-2"></div>
<div class="headshot headshot-3"></div>

<script>
// https://codepen.io/GeorgePark/pen/EEGJEj
</script>

</body>
</html>