Using divide-{colour1} and border-{colour2} at the same time?

[calthejuggler]

Hello everybody!

I have a project where I have a list of elements separated by divide-y divide-gray-200.
Each of those elements has an active state which includes border-l-2 border-blue-400.

I was hoping that this would allow both to co-exist. Unfortunately, it only works on the first element. Any other element has a grey left border:

I also tried it without the divide-gray-200, but that gives the border-top the blue colour:

Is it possible to set the two border styles as different colours without custom CSS?

I hope somebody can help me.

Please and thank you in advance!

[adamwathan]

Hey! In this case I'd recommend using an extra element:

<ul class="divide-y divide-gray-200">
  <li>
    <div class="border-l-2 border-blue-400">...</div>
  </li>
  ...
</ul>

[calthejuggler]

Awesome! It worked a treat. Thanks :)