如何在不改变顶部圆形边框形状的情况下取消底部圆形边框的样式？

Question

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>

Answer 1

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.