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 :
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:

Tailwind-play
If you have better answer, please add a comment about this, thank you!
Source: Stackoverflow.com