Question 45900 in CSS Question posted in
Some basic documentation can be found here.

Double border makes the div larger – CSS

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

Goal input

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 !

Tags:

2

Answers


  1. 0

    Since you want a rounded border on the inside corner of the buttons as well, IMHO the best solution is to make them overlap the border of the container:

    margin: -1px; position: relative; z-index: 1; height: calc(2.5rem + 2px);

    They need two extra pixels of height, so that will probably have to be hard-coded like this, don’t see any way to directly combine this with the h-10 class here. z-index is needed so that the input field will not be on top of the left button’s right-side border.

    And of course it will only work if you don’t need any alpha transparence on those borders.

    Login or Signup to reply.
  2. 0

    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:

    1. Remove rounded from the + and - divs
    2. 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:

    enter image description here

    Tailwind-play

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search