<div class="container">
  <div class="gradient">
Type your text here...Type your text here...Type your text here...Type your text here...Type your text here...Type your text here...Type your text here...Type your text here...Type your text here...Type your text here...
  </div>  
</div>
<div class="container-radius">
  <div class="gradient-border-radius">
Type your text here...Type your text here...Type your text here...Type your text here...Type your text here...Type your text here...Type your text here...Type your text here...Type your text here...Type your text here...
  </div>  
</div>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fff;  
}

.container {
  max-width: 250px;
  position: relative;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  padding: 5px;   
  margin-right:25px;
}

.gradient {
  background-color: #fff;
  padding: 2rem;
  color: black;  
}

.container-radius {
  max-width: 250px;
  position: relative;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  padding: 5px;
  border-radius: 7%;  
}

.gradient-border-radius {
  background-color: #fff;
  padding: 2rem;
  color: black;
  border-radius: 5%;  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.