Граница и интервалы при попутном ветре

Question

У меня возникли трудности с созданием радиуса границы в строке под текстом, и у меня также есть проблема с тем, как установить интервал между текстом и нижней строкой. Это мой ожидаемый результат

Ожидаемый результат -> https://ibb.co/RSKytWm

Codepen -> Codepen

код

Answer 1

Обновлять:

После долгого обсуждения с OP, OP заметил, что верхняя сторона не изогнута (я все равно не заметил), как показано ниже:

Даже добавив rounded-t-sm не решит это, поскольку это невозможно решить, потому что мы добавляем к кнопке, единственный способ решить - удалить bottom-border и добавить <hr> и стилизуйте его, чтобы он выглядел как линия.

Обновленный код:

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

Обновленный результат:

Детская площадка

Старый ответ

Не уверен, с какими трудностями вы добавляете border-radius, попробуйте добавить rounded-sm и это будет работать.

Если вы хотите добавить пробел между текстом и строкой, попробуйте добавить немного padding на кнопке, я думаю, что py-2 будет соответствовать вашим потребностям.

Код:

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

Результат:

Детская площадка