2

I'm having a difficulty in making the border radius on the line below the text and I also have a problem on how to put a spacing between the text and the bottom line. This is my expected output

Expected Output -> https://ibb.co/RSKytWm

Codepen -> Codepen

code

<div class="
    min-h-screen
    flex
    items-center
    justify-center
    py-4
    px-4
    sm:px-6
    lg:px-6
    bg-black
  ">
  <div class="max-w-lg w-full space-y-8">
    <div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
      <div class="flex flex-row justify-center">
        <button class="
                  inline-flex
                  items-end
                  justify-center
                  h-20
                  w-28
                  text-white
                  font-regular
                  border-b-4 border-white
                  rounded-3xl
                ">
          Personal Details
        </button>
        <button class="

                  inline-flex
                  items-end
                  justify-center
                  h-20
                  w-28
                  text-white
                  font-regular
                  border-b-4 border-white
                  rounded-3xl
                        mr-10
                  ml-10
                ">
          Contact Details
        </button>
        <button class="
                  inline-flex
                  items-end
                  justify-center
                  h-20
                  w-28
                  text-white
                  font-regular
                  border-b-4 border-white
                  rounded-3xl
                ">
          Other Details
        </button>
      </div>
    </div>
  </div>

</div>
MaxiGui
  • 6,190
  • 4
  • 16
  • 33
Joseph
  • 7,042
  • 23
  • 83
  • 181
  • For spacing between the text and border. You can achieve this by using padding bottom. Example: `pb-2` – Lowgy Sep 10 '21 at 14:56
  • @Lowgy. yes but what about the border radius of the line? – Joseph Sep 10 '21 at 15:01
  • @Joesph Looking into the border thing right now. – Lowgy Sep 10 '21 at 15:03
  • @Lowgy Thanks. If button is not applicable on this scenario, you can change it as long as it looks like the image I posted – Joseph Sep 10 '21 at 16:33
  • I am trying to just put a span inside the button below the text. It just the shape of the "border" you are trying to achieve. – Lowgy Sep 10 '21 at 17:00
  • So far this is what I have got. Let me know what you think. https://codepen.io/Lowgy/pen/dyRWMpG – Lowgy Sep 10 '21 at 17:14

1 Answers1

0

Update:

After a long discussion with the OP, the OP has noticed that the upper side is not curved (I didn't notice anyway), as below:

Preview

Even adding rounded-t-sm won't solve it, since this is not possible to solve because we are adding bottom-border to the button, the only way to solve is to remove the bottom-border and add <hr> and style it to look like line.

Updated code:

<div class="min-h-screen flex items-center justify-center py-4 px-4 sm:px-6 lg:px-6 bg-black">
    <div class="max-w-lg w-full space-y-8">
        <div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
            <div class="flex flex-row justify-center">
                <button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular">
                    Personal Details
                    <hr class="w-full border-white rounded-md border-2 mt-2" />
                </button>
                <button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular mr-10 ml-10">
                    Contact Details
                    <hr class="w-full border-white rounded-md border-2 mt-2" />
                </button>
                <button class="inline-flex flex-col items-end justify-center h-50 w-50 rounded-sm text-white font-regular">
                    Other Details
                    <hr class="w-full border-white rounded-md border-2 mt-2" />
                </button>
                
            </div>
        </div>
    </div>
</div>

Updated result:

Preview

Playground

Old answer

Not sure what is the difficulty that you have in adding border-radius, try adding rounded-sm and it will work.

If you want to add some space between the text and line, try adding some padding on the button, I think that py-2 will fit your needs.

Code:

<div class="min-h-screen flex items-center justify-center py-4 px-4 sm:px-6 lg:px-6 bg-black">
    <div class="max-w-lg w-full space-y-8">
        <div class="flex flex-col w-full px-4 py-4 sm:px-6 md:px-8">
            <div class="flex flex-row justify-center">
                <button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white">
                    Personal Details
                </button>
                <button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white mr-10 ml-10">
                    Contact Details
                </button>
                <button class="inline-flex items-end justify-center h-50 w-50 py-2 rounded-sm text-white font-regular border-b-4 border-white">
                    Other Details
                </button>
            </div>
        </div>
    </div>
</div>

Result:

Preview

Playground

Kevin M. Mansour
  • 2,915
  • 6
  • 18
  • 35