Zaoblené rohy u obrázků

Na mnoha webech sahá obrázek v kartě až k jejím krajům, bez bílého pruhu kolem. Takhle jsme upravili i Oskarovu kartu: třídu p-6 jsme přesunuli z karty do nového prvku div, který obaluje jméno, texty a tlačítko. Obrázek už kolem sebe nemá polstrování, takže sahá až ke krajům karty, a texty si od nich odstup drží. A protože mezeru mezi obrázkem a jménem teď vytváří polstrování, odebrali jsme jménu třídu mt-4.

Podívejte se ale na horní rohy karty: hranaté rohy obrázku z těch zaoblených trčí ven. Zaoblení platí pro pozadí a rámeček prvku, ale ne pro jeho obsah. Obrázek se vykreslí celý, i s rohy.

V kurzu CSS jste se naučili, že overflow: hidden ořízne všechno, co se do boxu prvku nevejde. Zaoblené rohy se přitom počítají také: obsah se ořízne i podél nich. V Tailwindu je to třída overflow-hidden. (I ostatní hodnoty mají své třídy: overflow-auto, overflow-scroll a overflow-visible.)

Zaoblit byste mohli i samotný obrázek, třídou rounded-t-2xl pro jeho horní rohy. Jednodušší je ale overflow-hidden na kartě: funguje pro cokoli, co se v rohu ocitne, a když jednou změníte zaoblení karty, nemusíte měnit i obrázek.