Tailwind divide-y class place weird-CodePudding

I'm facing a problem when I use the divide-y class from Tailwind, I created an example from my original code and here is a link : https://play.tailwindcss.com/q28EwgI0Ho.

<body>
  <div >Random Body</div>
  <div >
    <div  />
    <div >
      <div >
        <div >Title</div>
        <div >Random Text</div>
      </div>
      <div >
        <div >Title</div>
        <div >Random Text</div>
      </div>
      <div >
        <div >Random Text</div>
      </div>
    </div>
  </div>
</body>

As you can see the divide-x property doesn't work well on the right side, it flows over and we can see it as the div have rounded corners. How can I avoid this please ?

Notice that I can't use overflow-hidden as this causes the title div to be hidden.

CodePudding user response：

the problem is in using divide-y, instead, you can add border-t for the title which is below. Example: https://play.tailwindcss.com/7aPvDxo7z6