Resolved: Double border makes the div larger

In this post, we will see how to resolve Double border makes the div larger

Question:

I’m using React and Tailwind, I want to achieve this :

So I added a border on both button + and -, and I added a border on the parent div to display a border on all the element.
Problem is, the borders on buttons seemes to be larger because of the 2 borders.
If I use a border only on the right for – button, we can see it misses a little pixels with no border…
How can I achieve it ?
Here is a Tailwind Playground
Here is my code :

<div class="p-8">
  <div class="flex w-fit items-center rounded ring-1 ring-neutral-300">
    <button type="button" class="h-10 w-10 rounded border border-neutral-300 bg-transparent focus:outline-none">-</button>

    <input id="{id}" type="number" value="{count}" class="arrow-hide h-10 w-16 rounded border-none text-center text-base font-semibold focus:outline-none" />

    <button type="button" class="h-10 w-10 rounded border border-neutral-300 bg-transparent focus:outline-none">+</button>
  </div>
</div>

Thank you !

Best Answer:

If I use a border only on the right for – button, we can see it misses a little pixels with no border…

Actually it is not missing any pixels , it seems to be faded because of the rounded border.
Feasible solution:

Remove rounded from the + and - divs
Apply only left and right border to the respective divs.

Updated Code:

<div class="p-8">
  <div class="flex w-fit items-center rounded ring-1 ring-neutral-300">
    <button type="button" class="h-10 w-10 border-r border-neutral-300 bg-transparent focus:outline-none">-</button>

    <input id="{id}" type="number" value="{count}" class="arrow-hide h-10 w-16 rounded border-none text-center text-base font-semibold focus:outline-none" />

    <button type="button" class="h-10 w-10 border-l border-neutral-300 bg-transparent focus:outline-none">+</button>
  </div>
</div>

Output:

Tailwind-play

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com

Resolved: Double border makes the div larger

Resolved: How to stop a thread that has a blocking function from easygui in python

Resolved: Removing null keys from a json array of objects

Resolved: How can I generate at compile-time a separate OpenAPI Swagger.json file for each Controller in my ASP.NET project?

Question:

Best Answer:

Related Posts

Resolved: How to stop a thread that has a blocking function from easygui in python

Resolved: Removing null keys from a json array of objects

Resolved: How can I generate at compile-time a separate OpenAPI Swagger.json file for each Controller in my ASP.NET project?