Question 43245 in Html Question posted in
Some basic documentation can be found here.

How to make 2 borders overlap? – Html

I use tailwind and i need to achieve this :
enter image description here

So I made a border on the parent element and on both buttons (increment and decrement).

Problem : when there are 2 borders, we can see it. And the render is not like my template :
enter image description here

I added class -m-px but not sufficient.

Here is the playground

Here is the code :

<div class="flex flex-col gap-2 p-8">
  <div class="flex w-fit items-center rounded border border-solid border-neutral-300">
    <button type="button" class="-m-px mr-0 h-10 w-10 rounded border border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none">
      -
    </button>

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

    <button type="button" class="-m-px ml-0 h-10 w-10 rounded border border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none">
      +
    </button>
  </div>
</div>

Thank you for your help !

Tags:

2

Answers


  1. 0

    You can consider using arbitary value if you want to have 1px in only one side of the div

    enter image description here

    <div class="flex flex-col gap-2 p-8">
  <div class="flex w-fit items-center rounded border border-solid border-neutral-300">
    <button type="button" class="mr-0 h-10 w-10 rounded border-r-[1px] border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none">-</button>

    <input id="{id}" type="number" value="0" class="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-l-[1px] border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none">+</button>
  </div>
</div>

    Edit:

    Zero is placed slightly left because of the up and down arrows which will let the user to increment/decrement the value.

    enter image description here

    To remove this you need to add following code in the css file

    @layer components {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

    Final Output:

    enter image description here

    Tailwind-css

    Login or Signup to reply.
  2. 0

    You can add style=border-(left/right): 1px solid #ccc; to the button style.

    style="border-right: 1px solid #ccc;

    <div class="flex flex-col gap-2 p-8">
  <div class="flex w-fit items-center rounded border border-solid border-neutral-300">
    <button type="button" class="-m-px mr-0 h-10 w-10 rounded border border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none style="border-right: 1px solid #ccc;">
      -
    </button>
    <input id="{id}" type="number" value="0" class="h-10 w-16 rounded border-none text-center text-base font-semibold focus:outline-none" />

    <button type="button" class="-m-px ml-0 h-10 w-10 rounded border border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none style="border-left: 1px solid #ccc;">
      +
    </button>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search