<div class="box-1">
<pre>font-size: .5em;
border-width: .5em;</pre>
</div>

<div class="box-2">
<pre>font-size: .5em;
border-width: 1em;</pre>
</div>

.box-1 {
  border-width: .5em;
}

.box-2 {
  border-width: 1em;
}

DIV {
  font-size: .5em;
  border: 1em solid paleturquoise;
  
  line-height: 1;
  background: linear-gradient(pink, pink);
  background-size: 100% 1em;
  background-position: 50% 2em;
  background-repeat: no-repeat;
  
  // Helpers
  padding: 1em .5em;
  position: relative;
}

// Helpers
BODY {
  background: white;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 2rem;
  font-size: 42px;
  font-family: monospace;
}

PRE {
  margin: 0;
}