Скругление углов у картинок

На многих сайтах картинка в карточке доходит до самых краёв, без белой рамки вокруг. Мы изменили карточку Оскара именно так: перенесли класс p-6 с карточки на новый div вокруг имени, текстов и кнопки. Теперь вокруг картинки нет отступов, и она доходит до краёв карточки, а тексты сохраняют расстояние. А поскольку расстояние между картинкой и именем теперь создаёт внутренний отступ, мы убрали у имени mt-4.

Но посмотрите на верхние углы карточки: квадратные углы картинки торчат из скруглённых. Скругление применяется к фону и рамке элемента, но не к его содержимому. Картинка рисуется целиком, вместе с углами.

В курсе CSS вы узнали, что overflow: hidden обрезает всё, что не помещается в блок элемента. Скруглённые углы тоже учитываются: содержимое обрезается по ним. В Tailwind этот класс называется overflow-hidden. (Остальные значения тоже работают как классы: overflow-auto, overflow-scroll и overflow-visible.)

Можно было бы скруглить и саму картинку — классом rounded-t-2xl для её верхних углов. Но overflow-hidden на карточке проще: он работает для всего, что оказывается в углу, а если когда-нибудь вы измените скругление карточки, картинку менять не придётся.