Zaoblené rohy

Zaoblené rohy vytváří vlastnost border-radius, jak víte z kurzu CSS. V Tailwindu na ně slouží třídy rounded-* (anglicky zaoblený):

Třída	CSS	Pixely
`rounded-xs`	`border-radius: 0.125rem;`	2
`rounded-sm`	`border-radius: 0.25rem;`	4
`rounded-md`	`border-radius: 0.375rem;`	6
`rounded-lg`	`border-radius: 0.5rem;`	8
`rounded-xl`	`border-radius: 0.75rem;`	12
`rounded-2xl`	`border-radius: 1rem;`	16
`rounded-3xl`	`border-radius: 1.5rem;`	24
`rounded-full`	`border-radius: calc(infinity * 1px);`	nekonečně mnoho
`rounded-none`	`border-radius: 0;`	0

Názvy velikostí znáte z velikostí písma a maximálních šířek: od extra malé (xs) přes střední (md) po extra velké (xl, 2xl, 3xl). Pozor na starší příklady na internetu, psané pro Tailwind 3: některé názvy se od té doby posunuly. Tam měla třída rounded-sm jen 2 pixely, jako dnešní rounded-xs.

Třída rounded-full (úplně zaoblený) je zvláštní: poloměr je tak velký, že se z kratších stran prvku stanou půlkruhy. Z tlačítka je pak pilulka a ze čtverce, například z obrázku se třídou size-16, kruh. V kurzu CSS jste kruh dělali pomocí border-radius: 50%, jenže u obdélníku dá 50 % elipsu, ne pilulku:

rounded-full border-radius: 50%

Zaoblit můžete i jen některé rohy: rounded-t-2xl zaoblí dva horní (t jako top, stejně jako u rámečků), rounded-l-lg dva levé a rounded-tl-lg jen levý horní.

Pokyny

Přidejte třídu rounded-2xl Oskarově kartě.

Přidejte třídu rounded-full tlačítku „Adoptovat Oskara“, které tím dostane tvar pilulky.

Začněte programovat zdarma

3/10