<h1>Interesting borders</h1>

<div class="container">
  <div class="row">
    <div class="item">
      <h2>Item Title</h2>

      <p> It's not who I am underneath but what I do that defines me. Does it come in black? It's ends here. Hero can be anyone. Even a man knowing something as simple and reassuring as putting a coat around a young boy shoulders to let him know the world hadn't ended.</p>
    </div>
    <div class="item">
      <h2>Item Title</h2>

      <p>
        It was a dog. It was a big dog. Well, you see... I'm buying this hotel and setting some new rules about the pool area. I seek the means to fight injustice. To turn fear against those who prey on the fearful.</p>
    </div>
    <div class="item">
      <h2>Item Title</h2>

      <p>
        I'm Batman I seek the means to fight injustice. To turn fear against those who prey on the fearful. I'm not wearing hockey pads. Accomplice? I'm gonna tell them the whole thing was your idea</p>
    </div>
  </div>
</div>

@import "https://unpkg.com/open-props";

html {
  font-family: var(--font-sans);
}

.row {
  display: flex;
  gap: 2em;
  justify-content: space-evenly;
  padding: 2em;
}

.item {
  padding: 1em;
  border-block-start: 5px solid;
  border-inline-start: 5px solid;
  border-image-source: linear-gradient(45deg, rebeccapurple, transparent 75%);
  border-image-slice: 1;
}