<body>
  <div class="family"><p>Henry Mills</p></div>
  <div class="family"><p>Lucy Mills</p></div>
  <div class="family"><p>Regina Mills</p></div>
  <div class="family"><p>Emma Swan</p></div>
  <div class="family"><p>Neal Cassidy</p></div>
  <div class="family"><p>Captain Hook</p></div>
  <div class="family"><p>Snow White</p></div>
  <div class="family"><p>Prince Charming</p></div>
  <div class="family"><p>Rumplestiltskin</p></div>
  <div class="family"><p>Cora</p></div>
  <div class="family"><p>Prince Henry</p></div>
  <div class="family"><p>Milah</p></div>
  <div class="family"><p>Belle</p></div>
  <div class="family"><p>King Leopold</p></div>
  <div class="family"><p>Queen Eva</p></div>
  <div class="family"><p>King Xavier</p></div>
  <div class="family"><p>Fiona</p></div>
  <div class="family"><p>Malcolm</p></div>
  <div class="family"><p>Robert</p></div>
  <div class="family"><p>Ruth</p></div>
  <div class="family"><p>King George</p></div>
  <div class="family"><p>Prince James</p></div>
  <div class="family"><p>Zelena</p></div>
  <div class="family"><p>Robin</p></div>
  <div class="friend" id="best_friend"><p>Cinderella</p></div>
  <div class="friend"><p>Dr. Hopper</p></div>
  <div class="friend"><p>Paige</p></div>
  <div class="friend"><p>Ruby</p></div>
  <div class="friend"><p>Robin Hood</p></div>
  <div class="friend"><p>Violet</p></div>
  <div class="friend"><p>Hansel</p></div>
  <div class="friend"><p>Gretel</p></div>
  <div class="friend"><p>Sorcerer's Apprentice</p></div>
  <div class="enemy" id="archnemesis"><p>Cruella De Vil</p></div>
  <div class="enemy"><p>Black Fairy</p></div>
  <div class="enemy"><p>Peter Pan</p></div>
  <div class="enemy"><p>Felix</p></div>
  <div class="enemy"><p>Greg Mendell</p></div>
  <div class="enemy"><p>Tamara</p></div>
  <div class="enemy"><p>Issac</p></div>
  <div class="enemy"><p>Hades</p></div>
  <div class="enemy"><p>Evil Queen</p></div>
  <div class="enemy"><p>Ingrid</p></div>
  <div class="enemy"><p>Hades</p></div>
  <div class="enemy"><p>Black Swan</p></div>
</body>
div {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 2px solid black;
  position: relative;
  display: inline-block;
  margin-left: 5px;
  margin-top: 5px;
  text-align: center;
}

div p {
  position: relative;
  margin-top: 40px;
  font-size: 12px;
}

.family {
  border: 2px dashed #0000FF;
}

.friend {
  border: 2px dashed #008000;
}

.enemy {
  border: 2px dashed #FF0000;
}

#best_friend {
  border: 4px solid #00C957;
}

#archnemesis {
  border: 4px solid #CC0000;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.