Hoppa till huvudinnehåll
LibraTool logoLibraTool

Gratis CSS-kantrundningsgenerator

Designa visuellt rundade hörn med oberoende kontroll över varje hörn. Stöder elliptisk X/Y-syntax för organiska blobformer.

Fungerar offline när den väl lästs in
border-radius: 20px 20px 20px 20px;
Enhet

Vanliga användningar

  • Organiska blob-formerAnvänd den elliptiska X/Y-syntaxen för att skapa unika blob-former för herosektioner och illustrationer.
  • Kort- och behållarhörnStandardavrundade hörn för kort, behållare och paneler i modern UI-design.
  • Avatar- och profilbildsformerSkapa rätt hörnstil för profilbilder: cirkulär, squircle eller avrundat kvadrat.
  • Piller, taggar och märkenBygg perfekt rundade pillerknappar, taggar och märken med 9999-förvalet.
  • Asymmetriska hörndesignerBlanda radier över hörn för att skapa distinkta, varumärkeskänningsbara kort- och knappformer.

Så här fungerar det

Generatorn för hörnradie (border-radius) körs helt i webbläsaren — det finns ingen server, inget bibliotek och ingen uppladdning. Den bygger CSS-värdesträngen för border-radius direkt i JavaScript med React-state och useMemo, och tillämpar den sedan som en infogad stil på ett levande div-element så att webbläsarens egen CSS-motor renderar formen i realtid.

  1. 1
    Reglage skriver till state
    Varje intervallinmatning skriver till en av åtta numeriska state-variabler — fyra horisontella hörnradier och fyra vertikala för elliptiskt läge. Enhetligt läge slår ihop alla åtta till ett enda reglage via en setAll-hjälpfunktion som synkroniserar alla värden samtidigt.
  2. 2
    useMemo bygger CSS-värdet
    En useMemo-hook räknar om border-radius-strängen varje gång ett hörnvärde, en enhet (px eller %) eller den elliptiska växeln ändras. I standardläge skapas den fyrvärdiga kortformen; med elliptiskt på läggs snedstrecksavgränsaren till för den fullständiga åttavärdessyntaxen — t.ex. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Webbläsarens CSS-motor renderar förhandsvisningen
    Den beräknade strängen sätts som en infogad borderRadius-stil på ett vanligt div-element. Webbläsarens layoutmotor sköter all rendering — det finns ingen canvas, ingen SVG och ingen tredjeparts ritkod.
  4. 4
    Clipboard API kopierar utdatan
    Att klicka på Kopiera anropar navigator.clipboard.writeText med antingen CSS-deklarationen (border-radius: ...;) eller motsvarande godtycklig Tailwind-värdesklass (rounded-[...]), beroende på det valda formatalternativet.

Relaterade verktyg

🎨

CSS-boxskuggegenerator

Visuell byggare för CSS box-shadow med liveförhandsvisning, flerlagersstapling, färgväljare, inset-växling och kopiering med ett klick. Inkluderar Material-, neumorfism- och glödförinställningar.

Prova det
🟦

CSS Grid-generator

Designa visuellt ett CSS-rutnät — spår, enheter och gap — och kopiera den genererade CSS och HTML.

Prova det
↔️

CSS Flexbox-generator

Experimentera med flex-riktning, wrap, justify och align på live-objekt — och kopiera CSS.

Prova det

Vanliga frågor