<div class="card">
  <h2>Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste eaque quidem placeat corrupti sed repudiandae necessitatibus temporibus amet laborum cum, nisi nulla quisquam ducimus nam facilis vitae dolorem, totam odio?</p>
</div>
.card {
  border-radius: max(0px, min(8px, calc((100vw - 100%) * 9999)));
  
  
  
  
  max-width: 300px;
  background: white;
  padding: 1.25rem;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
}
h2 {
  margin: 0 0 1rem 0;
}
p {
  margin: 0;
}
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(to right, #f46b45, #eea849);
  font: 300 100%/1.4 system-ui;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.