Создание простых масок CSS: изображения с закругленными краями

Демонстрация работы свойства закругления рамки для создания фотографий в круглых рамках, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<div id="happyfaces">
  <div class="anna"></div>
  <div class="frederick"></div>
  <div class="sophie"></div>
</div>

CSS

div#happyfaces div {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid #000;
    width: 13rem;
    height: 13rem;
    background-size: cover;
}
.anna {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/profile1.jpg) no-repeat center hsl(200,50%,50%);
}
.frederick {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/profile2.jpg) no-repeat center hsl(200,50%,50%);
}
.sophie {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/profile3.jpg) no-repeat center hsl(200,50%,50%);
}