<div class="circle">
  <p class="circle-content">
    This text defiantly wraps within its circular container!This text defiantly wraps within its circular container!This text defiantly wraps within its circular container!This text defiantly wraps within its circular container!
  </p>
</div>

@import 'https://fonts.googleapis.com/css?family=Share+Tech+Mono';

@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/jess-harding-lqT6NAmTaiY-unsplash.jpg'),radial-gradient(#28a3dd, #0d7751);
    background-size: cover;
    background-position: center;
    font-family: "Share Tech Mono", monospace;
    font-size: 2rem;
    background-blend-mode: multiply,screen, overlay;
}

.circle {
  background: #456BD9;
  border-radius: 50%;
  color: #fff;
  height: 50vh;
  position: relative;
  width: 50vh;
  overflow: hidden;
  font-size: 4vh;
}

.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%
    );
  }
}