Ga naar hoofdinhoud
LibraTool logoLibraTool

Gratis CSS border-radius-generator

Ontwerp visueel afgeronde hoeken met onafhankelijke controle over elke hoek. Ondersteunt de elliptische X/Y-syntaxis voor organische blobvormen.

Werkt offline na het laden
border-radius: 20px 20px 20px 20px;
Eenheid

Veelvoorkomend gebruik

  • Organische Blob-vormenGebruik de elliptische X/Y-syntaxis om unieke blob-vormen te maken voor helpsecties en illustraties.
  • Kaart- en ContainerhoekenStandaard afgeronde hoeken voor kaarten, containers en panelen in modern UI-ontwerp.
  • Avatar- en ProfielafbeeldingsvormenMaak de juiste hoekstijl voor profielfoto's: circulair, squircle of afgeronde vierkant.
  • Pillen, Tags en BadgesBouw perfect afgeronde pilu-knoppen, tags en badges met de 9999 preset.
  • Asymmetrische Hoekontwer penMix stralen over hoeken om onderscheidende, merk-herkenbare kaart- en knopvormen te creëren.

Hoe het werkt

De border-radius-generator draait volledig in de browser — er is geen server, geen bibliotheek en geen upload. Hij bouwt de CSS-waarde voor border-radius direct in JavaScript op met React-state en useMemo, en past die toe als inline stijl op een live div-element, zodat de eigen CSS-engine van de browser de vorm in realtime weergeeft.

  1. 1
    Schuifregelaars schrijven de state
    Elke bereikinvoer schrijft naar een van acht numerieke statevariabelen — vier horizontale hoekradii en vier verticale voor de elliptische modus. De uniforme modus voegt alle acht samen tot één schuifregelaar via een setAll-helper die alle waarden tegelijk synchroniseert.
  2. 2
    useMemo stelt de CSS-waarde samen
    Een useMemo-hook berekent de border-radius-tekenreeks opnieuw zodra een hoekwaarde, eenheid (px of %) of de elliptische schakelaar verandert. In de standaardmodus levert die de verkorte notatie met vier waarden; met elliptisch aan voegt hij het schuine-streepscheidingsteken toe voor de volledige syntaxis met acht waarden — bijv. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    De CSS-engine van de browser toont het voorbeeld
    De berekende tekenreeks wordt als inline borderRadius-stijl op een gewoon div-element gezet. De layout-engine van de browser doet al het tekenwerk — er is geen canvas, geen SVG en geen tekencode van derden.
  4. 4
    De Clipboard API kopieert de uitvoer
    Klikken op Kopiëren roept navigator.clipboard.writeText aan met de CSS-declaratie (border-radius: ...;) of de gelijkwaardige Tailwind-klasse met willekeurige waarde (rounded-[...]), afhankelijk van de gekozen formaatschakelaar.

Gerelateerde tools

🎨

CSS box-shadow-generator

Visuele bouwer voor CSS box-shadow met livevoorvertoning, meerdere lagen, kleurkiezer, inset-schakelaar en kopiëren met één klik. Inclusief presets voor Material, neumorfisme en gloei.

Probeer het
🟦

CSS-rastergenerator

Ontwerp visueel een CSS-raster — tracks, eenheden en tussenruimtes — en kopieer de gegenereerde CSS en HTML.

Probeer het
↔️

CSS-flexboxgenerator

Experimenteer met flex-richting, wrap, justify en align op live-items — en kopieer de CSS.

Probeer het

Veelgestelde vragen