Generátor border-radius

Ako používať generátor border-radius

1. Presúvaj body na okrajoch náhľadu. Každý farebný bod nastavuje vodorovný polomer jedného rohu; ak je zapnuté Eliptické rohy (8 hodnôt), biele body nastavujú zvislé polomery.
2. Alebo zadaj presné hodnoty v časti Rohy: Vľavo hore, Vpravo hore, Vpravo dole a Vľavo dole, pričom každý má pole Vodorovne a Zvisle.
3. Vyber Jednotku: % (percentá rámčeka) alebo px (pixely). Pri prepnutí sa aktuálne hodnoty prepočítajú, takže tvar zostane rovnaký.
4. Nastav Šírku rámčeka (px) a Výšku rámčeka (px) podľa svojho prvku a pomocou Všetky rohy zaobli všetky rohy naraz.
5. Vyskúšaj Predvoľby (Zaoblený, Tabletka, Kruh, List, Kvapka, Vajce, Lístok a tri bloby) alebo klikni na Náhodný blob pre organický tvar.
6. Zapni Samostatné vlastnosti, ak chceš radšej štyri deklarácie border-*-radius, a potom skopíruj Kód CSS tlačidlom Kopírovať.

Klávesnica: aktivuj bod a šípkami zmeň jeho polomer o jeden krok (so Shiftom o 10).

Nástroj funguje v tvojom prehliadači. Nič, čo zadáš, sa neodosiela na server.

Syntax vlastnosti border-radius

border-radius prijíma jednu až štyri hodnoty v poradí vľavo hore, vpravo hore, vpravo dole, vľavo dole. Podobne ako pri okrajoch sa chýbajúce hodnoty preberajú z protiľahlého rohu: border-radius: 10px 20px zaoblí ľavý horný a pravý dolný roh o 10 px a ostatné dva o 20 px. Nástroj vždy zapíše najkratší rovnocenný tvar.

Každý roh je v skutočnosti štvrtina elipsy s dvoma polomermi. Lomka oddeľuje vodorovné polomery od zvislých, čo dáva až osem hodnôt:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Pred lomkou sú vodorovné polomery štyroch rohov, za ňou zvislé. Ak sú oba zoznamy rovnaké, časť za lomkou sa vynechá.

Pixely alebo percentá?

• px dá rovnakú krivku bez ohľadu na veľkosť prvku. Je to správna voľba pre tlačidlá, karty a vstupné polia: border-radius: 8px.
• % je relatívne voči prvku: vodorovné polomery k jeho šírke, zvislé k jeho výške. Hodnota 50% zmení štvorec na kruh a obdĺžnik na elipsu. Práve percentá zabezpečia, že sa blob tvary mení spolu s prvkom.

Pre tlačidlo v tvare tabletky použi polomer v pixeloch aspoň polovicu výšky. Predvoľba Tabletka presne to urobí pre zadanú veľkosť rámčeka; funguje aj obrovská hodnota ako 999px.

Keď súčet susedných polomerov presiahne dĺžku spoločnej strany, prehliadače zmenšia všetky polomery proporcionálne, kým sa nezmestia. Preto tvar nerozbiješ, ani keď presunieš dva body cez seba.

Blob tvary

Predvoľba blob a Náhodný blob používajú osem percent, pri ktorých sa dva body na každej strane sčítajú na 100 %. Krivky na seba presne nadväzujú a tvar vyzerá ako hladký kamienok. Medzi dvoma blobmi môžeš animovať pomocou CSS transition na border-radius a získať efekt „morfovania“.