Generátor Border Radius
CSS border-radius generátor nastaví každý roh border-radius prvku v procentech samostatnými posuvníky nebo jedním posuvníkem All Corners, nabízí předvolby jako kruh, list a blob a zkopíruje CSS.
O tomto nástroji
CSS border-radius generátor nastaví každý roh border-radius prvku v procentech samostatnými posuvníky nebo jedním posuvníkem All Corners, nabízí předvolby jako kruh, list a blob a zkopíruje CSS.
Jak ho použít
- Posuň posuvníky jednotlivých rohů, nebo použij All Corners.
- Vyzkoušej předvolbu, například Circle, Leaf nebo Blob.
- V případě potřeby změň velikost náhledu.
- Klikni na Copy CSS.
Dobré vědět
- border-radius přijímá až čtyři hodnoty v pořadí levý horní, pravý horní, pravý dolní, levý dolní.
- border-radius: 50% u čtvercového prvku vytvoří kruh.
- Poloměry v procentech se škálují s velikostí prvku; poloměry v pixelech zůstávají pevné.
- Nestejné poloměry na protilehlých rozích vytvoří tvary listu nebo blobu bez jakéhokoli SVG.
- border-radius podporují všechny současné prohlížeče bez prefixů.
Běží celý ve vašem prohlížeči — nic, co zadáte, se nenahrává ani neukládá.
Časté dotazy
Jak v CSS udělám zaoblené rohy?
Nastav border-radius, například border-radius: 12px; pro všechny rohy, nebo čtyři hodnoty pro jednotlivé rohy.
Jak v CSS udělám kruh?
Dej prvku stejnou šířku a výšku a border-radius: 50%.
V jakém pořadí jsou čtyři hodnoty border-radius?
Levý horní, pravý horní, pravý dolní, levý dolní — po směru hodinových ručiček od levého horního rohu.
Mám u border-radius používat px, nebo %?
px použij pro konzistentní velikost rohů u tlačítek a karet; % pro tvary jako kruhy a bloby, které se škálují s prvkem.