.circle {
  background: #456BD9;
  border-radius: 50%;
  color: #fff;
  height: 8.4em;
  position: relative;
  width: 8.4em;
}

.circle-content {
  hyphens: auto;
  margin: 0.75em;
  text-align: center;
}

/**
 * Enhanced experience
 *
 * Credit: https://skeate.github.io/2015/07/13/Wrapping-Text-to-Fit-Shaped-Containers-with-CSS.html
 */

@supports (shape-outside: circle(50%)) {
  .circle-content {
    height: 100%;
    margin: 0;
  }
  
  .circle::before,
  .circle-content::before {
    content: "";
    height: 100%;
    width: 50%;
  }
  
  .circle::before {
    float: left;
    shape-outside: polygon(
      0 0, 100% 0, 60% 4%, 40% 10%, 20% 20%, 10% 28.2%, 5% 34.4%, 0 50%,
      5% 65.6%, 10% 71.8%, 20% 80%, 40% 90%, 60% 96%, 100% 100%, 0 100%
    );
  }
  
  .circle-content::before {
    float: right;
    shape-outside: polygon(
      100% 0, 0 0, 40% 4%, 60% 10%, 80% 20%, 90% 28.2%, 95% 34.4%, 100% 50%,
      95% 65.6%, 90% 71.8%, 80% 80%, 60% 90%, 40% 96%, 0 100%, 100% 100%
    );
  }
}