How can I make 4 curved corner borders in CSS?

Question

example picture I've got four summary section and they all have four small curved corner borders which I haven't been able to do it.

I was able to make two corners with after and before pseudo elements but they are only the top right one and the bottom left one (I got these solutions from stack overflow) and they are not even curved.

This is the HTML code

.red-part {
  text-align: center;
  background-color: hsla(0, 100%, 67%, 0.1);
  padding: 1rem;
  margin-top: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
  border-radius: 10px;
  position: relative;
}

.red-part::after {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: 1px;
  right: 1px;
  border-top: 1px solid hsla(0, 100%, 67%, 0.2);
  border-right: 1px solid hsla(0, 100%, 67%, 0.2);
}

.red-part::before {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 1px;
  left: 1px;
  border-bottom: 1px solid hsla(0, 100%, 67%, 0.2);
  border-left: 1px solid hsla(0, 100%, 67%, 0.2);
}

.first-section {
  display: inline-block;
  margin: 0 auto;
}

#reaction {
  color: hsl(0, 57%, 60%);
}

<div class="red-part" class="first-section">
  <img src="./assets/images/icon-reaction.svg" alt="Reaction" class="first-section">
  <div class="first-section" id="reaction">Reaction</div>
  <div class="first-section">80</div>
  <div class="first-section" data-number="hundred"> / 100</div>
</div>
<div class="orange-part" class="second-section">
  <img src="./assets/images/icon-memory.svg" alt="Memory" class="second-section">
  <div class="second-section" id="memory">Memory</div>
  <div class="second-section">92</div>
  <div class="second-section" data-number="hundred"> / 100</div>
</div>
<div class="green-part" class="third-section">
  <img src="./assets/images/icon-verbal.svg" alt="Verbal" class="third-section">
  <div class="third-section" id="verbal">Verbal</div>
  <div class="third-section">61</div>
  <div class="third-section" data-number="hundred"> / 100</div>
</div>
<div class="blue-part" class="fourth-section">
  <img src="./assets/images/icon-visual.svg" alt="Visual" class="fourth-section">
  <div class="fourth-section" id="visual">Visual</div>
  <div class="fourth-section">72</div>
  <div class="fourth-section" data-number="hundred"> / 100</div>
</div>

Answer 1

You don't actually need to add any of those psuedo-elements for the desired effect; simply increase the border-radius, for example:

    .red-part {
      text-align: center;
      background-color: hsla(0, 100%, 67%, 0.1);
      padding: 1rem;
      margin-top: 1rem;
      margin-left: 2rem;
      margin-right: 2rem;
      border-radius: 50px;
      position: relative;
    }

    .first-section {
      display: inline-block;
      margin: 0 auto;
    }

    #reaction {
      color: hsl(0, 57%, 60%);
    }