How can I unstyle bottom rounded border without changing the shape of top rounded border?

Kopsie 0
Viewed 23

I'm trying to recreate Google. When you focus on the search bar at Google.com, the bottom border will unstyle the rounded border. So I tried to make this effect by setting focus to unstyle bottom border-radius, but this will change the top border's shape.

the code I write is roughly like this.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>

<div class="rounded-[24px] bg-white px-3 focus-within:rounded-b-none">
      <input type="text" class="w-full outline-none" />
    </div>
tailwind-css css html
1 Answers

I think you need to set a fixed height on the div and the rounded corners to match half of that. Like:

<div class="h-screen w-full bg-slate-500 p-8">

  <div class="h-8 rounded-t-[1rem] rounded-b-[1rem] bg-white flex items-center px-3 focus-within:rounded-b-none">
        <input type="text" class="w-full outline-none" />
  </div>

</div>

In tailwind, h-8 equals 2rem. I also centered the input vertically in the div with flex.

See working tailwind play example.

user2Gab10
Related