Přeskočit na hlavní obsah
LibraTool logoLibraTool

Generátor CSS zaoblení rohů zdarma

Vizuálně navrhujte zaoblené rohy s nezávislým ovládáním každého rohu. Podporuje eliptickou syntaxi X/Y pro organické tvary blobu.

Funguje offline po načtení
border-radius: 20px 20px 20px 20px;
Jednotka

Běžná použití

  • Organické blob tvaryPoužijte eliptickou syntaxi X/Y k vytvoření jedinečných blob tvarů pro hero sekce a ilustrace.
  • Rohové karty a kontejneryStandardní zaoblené rohy pro karty, kontejnery a panely v moderním UI designu.
  • Tvary avatara a fotografie profiluVytvořte správný rohový styl pro fotografie profilu: kruhový, squircle nebo zaoblený čtverec.
  • Pilulky, tagy a odznakyVytvořte dokonale zaoblená tlačítka pilulky, tagy a odznaky s předvolbou 9999.
  • Asymetrické rohové designySmíchejte poloměry přes rohy a vytvořte charakteristické, poznatelné tvary karet a tlačítek.

Jak to funguje

Generátor border-radius běží zcela v prohlížeči — bez serveru, bez knihovny, bez nahrávání. Sestavuje řetězec hodnoty CSS border-radius přímo v JavaScriptu pomocí stavu React a useMemo a poté jej aplikuje jako vložený styl na živý prvek div, takže vlastní CSS engine prohlížeče vykresluje tvar v reálném čase.

  1. 1
    Posuvníky zapisují stav
    Každý vstup typu rozsah zapisuje jednu z osmi číselných stavových proměnných — čtyři vodorovné poloměry rohů a čtyři svislé pro eliptický režim. Jednotný režim sloučí všech osm do jediného posuvníku pomocí pomocné funkce setAll, která synchronizuje všechny hodnoty najednou.
  2. 2
    useMemo sestavuje hodnotu CSS
    Hook useMemo přepočítá řetězec border-radius, kdykoli se změní hodnota rohu, jednotka (px nebo %) nebo přepínač eliptického režimu. Ve standardním režimu vytváří čtyřhodnotovou zkrácenou notaci; se zapnutým eliptickým režimem přidává oddělovač lomítkem pro plnou osmihodnotovou syntaxi — např. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    CSS engine prohlížeče vykresluje náhled
    Vypočítaný řetězec se nastaví jako vložený styl borderRadius na obyčejný prvek div. Veškeré vykreslování provádí engine rozvržení prohlížeče — nepoužívá se plátno, SVG ani kreslicí kód třetí strany.
  4. 4
    Clipboard API kopíruje výstup
    Kliknutí na Kopírovat volá navigator.clipboard.writeText buď s deklarací CSS (border-radius: ...;), nebo s odpovídající třídou Tailwind s libovolnou hodnotou (rounded-[...]), podle zvoleného přepínače formátu.

Související nástroje

🎨

Generátor CSS stínu rámečku

Vizuální nástroj pro CSS box-shadow s živým náhledem, vícevrstvým skládáním, výběrem barev, přepínačem vnitřního stínu a kopírováním jedním kliknutím. Zahrnuje přednastavení Material, neumorphism a záři.

Vyzkoušet
🟦

Generátor CSS Grid

Vizuálně navrhněte CSS grid — stopy, jednotky a mezery — a zkopírujte vygenerovaný CSS a HTML.

Vyzkoušet
↔️

Generátor CSS Flexbox

Experimentujte se směrem flexu, zalamováním, justify a align na živých prvcích — a zkopírujte CSS.

Vyzkoušet

Časté dotazy