Tab border to align with full width border

Question

I am trying to achieve something like this in HTML/CSS (TailwindCSS):

Notice how the border on the active tab aligns perfectly with the full-width border.

CODE:

Here is my HTML which includes the tailwind css classes.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="bg-slate-800 rounded-md mb-5 p-8">
    <ul class="flex items-center mb-4 border-b-2">
        <li class="p-4 border-b-2 border-red-500">
            <a href="" class="font-semibold block">First Tab</a>
        </li>
        <li class="p-4">
            <a href="" class="font-semibold block">Second Tab</a>
        </li>
        <li class="p-4">
            <a href="" class="font-semibold block">Third Tab</a>
        </li>
    </ul>
  <div>
    tab content
  </div>
</div>

Notice how the red border isn't perfectly aligned to the full-width border.

How can I get things perfectly aligned?

Thanks @Paulie_D. Although I had seen snippets on the site before, I wasn't sure how to create them myself. Today was my chance to learn! I've now added a snippet. :) — J86
– J86, Commented May 30, 2022 at 12:50
What you are seeing is entirely logical. The border of the li is inside the ul which has it's own border. You'd have to drop the li by the width of it's border. So something like margin-bottom: -2px so that the li now covers the ul border. — Paulie_D
– Paulie_D, Commented May 30, 2022 at 12:52

krishnaacharyaa · Accepted Answer · 2022-06-07 06:47:57Z

2

As the li is within the ui , so the when you apply border to li you push the entire ul, so giving a negative margin of the width of border of ul to li i.e 2px fixes this problem.

Just add -mb-[2px] in the active div

<div class=" rounded-md mb-5 p-8">
  <ul class="flex items-center mb-4 border-b-2">
    <li class="p-4 border-b-2 border-red-500 -mb-[2px]">
      <a href="" class="font-semibold  ">
        First Tab
      </a>
    </li>
    <li class="p-4 ">
      <a href="" class="font-semibold ">
        Second Tab
      </a>
    </li>
    <li class="p-4">
      <a href="" class="font-semibold ">
        Third Tab
      </a>
    </li>
  </ul>
  <div>tab content</div>
</div>

Before

After

answered Jun 7, 2022 at 6:47

krishnaacharyaa

26.1k9 gold badges102 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tab border to align with full width border

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related