Border Radius Generator
Gratis online border-radius generator. Sleep 8 handvatten of kies een blob-voorinstelling om organische CSS-vormen te maken en de code direct te kopiëren.
Wat betekent de 8-waarden syntax van border-radius?
In de syntax border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 zijn de waarden vóór de schuine streep de horizontale stralen (linksboven, rechtsboven, rechtsonder, linksonder) en die erna de verticale stralen. Verschillende waarden per richting creëren de organische blob-vormen.
Hoe gebruik ik de gegenereerde CSS?
Kopieer de border-radius-regel en plak deze in een willekeurige CSS-regel van het element dat je wilt vormgeven, bijvoorbeeld .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. Werkt in pure CSS, Sass, Tailwind arbitrary values en inline styles.
Waar worden blob-vormen gebruikt?
Blob-vormen zijn populair voor hero-illustraties, avatars, profielfoto's, featurekaarten, knoppen en decoratieve achtergronden in modern web- en app-ontwerp.
Werken afgeronde hoeken in alle browsers?
Ja. border-radius wordt ondersteund door elke moderne browser, waaronder Chrome, Firefox, Safari, Edge en mobiele browsers, zonder vendor-prefixen.
Kan ik de blob-vorm animeren?
Ja. border-radius is animeerbaar, dus met een CSS-transition kun je vloeiend morphen tussen vormen, bijvoorbeeld .blob { transition: border-radius .8s ease; }.
Wat is het verschil tussen de 4-waarden en 8-waarden syntax?
De 4-waarden vorm geeft elke hoek dezelfde horizontale en verticale straal, wat volstaat voor pillen of cirkels. De 8-waarden vorm splitst horizontale en verticale stralen, wat asymmetrische, organische vormen mogelijk maakt.
Hoe maak ik een perfecte cirkel?
Zet alle acht waarden op 50% bij een vierkant element, of gebruik simpelweg border-radius: 50%. Je kunt ook starten vanaf een cirkelachtige voorinstelling en die verfijnen.
Worden mijn gegevens ergens geüpload?
Nee. De generator draait volledig in je browser met pure CSS en JavaScript. Niets van wat je sleept, typt of kopieert wordt naar een server gestuurd.
Kan ik dit gebruiken op niet-vierkante elementen?
Ja, maar procentuele stralen zijn relatief aan de afmetingen van het element: een rechthoek krijgt ellipsvormige hoeken en ziet er anders uit dan de vierkante preview. Gebruik de gegenereerde waarden als startpunt en stel bij.
Hoe Border Radius Generator te gebruiken
Border-radius met acht waarden levert organische blob-vormen op met elliptische hoeken die een gewoon afgeronde rechthoek niet kan evenaren. Boetseer de vorm met de handvatten en kopieer de kant-en-klare CSS — alles wordt live in je browser gerenderd.
- Sleep een van de acht handvatten op de randen van de vorm — die op de boven- en onderrand stellen de horizontale stralen in, die aan de zijkanten de verticale.
- Klik op een van de zes vooraf ingestelde vlakken om van een ontworpen blob te vertrekken, en verfijn daarna de waarden in de nummerieke velden Horizontale stralen en Verticale stralen (één per hoek, 0–100%).
- Druk op Willekeurig om met één klik een nieuwe organische vorm te trekken, of op Herstellen om terug te gaan naar de standaardvorm en -kleuren.
- Kies een Vormkleur en een Achtergrond om de blob op je doelpalet te bekijken — beide passen zich direct aan.
- Druk op CSS kopiëren om de live weergegeven border-radius-declaratie uit de balk onderaan over te nemen en op elk element te plakken.
Pas de code toe op een vierkant element met overflow: hidden voor de klassieke blob-look; percentages houden de kromme soepel op elke maat, en de schuine streep in de syntaks scheidt horizontale van verticale stralen.
Gerelateerde tools
- CSS Border Radius Generator Visuele CSS border-radius generator. Pas elke hoek onafhankelijk aan met realtime voorbeeld en kopieer de CSS-code direct.
- CSS-gradiëntgenerator Maak visueel verbluffende CSS-gradiënten. Genereer lineaire, radiale en conische gradiënten met meerdere kleurstops, hoeken en posities. Kopieer direct productierijpe CSS-code.
- CSS Box Shadow Generator Gratis online CSS box-shadow generator. Maak visueel prachtige schaduwen met instelbare offset, blur, spread, kleur en inset. Live voorbeeld en directe code kopiëren.
- Kleurenpalet Generator Maak direct mooie, harmonieuze kleurenpaletten met onze gratis online generator. Ondersteunt monochromatische, analoge, complementaire, triadische, split-complementaire en tetradische modi. Pas kleuren aan met HSL-schuifregelaars, vergrendel favorieten en exporteer als CSS, Tailwind, JSON of SVG. 100% browser-gebaseerd, uw gegevens verlaten nooit uw apparaat.
- Kleurconverteerder Gratis online kleurconverteerder. Converteer HEX, RGB, HSL, HSV formaten direct met visuele kiezer. 100% privé, werkt in uw browser.
- CSS Easing Generator Gratis online CSS easing generator. Sleep de cubic-bezier-controlepunten op een interactieve curve, kies uit 18 presets, bekijk een herhalende bal-animatie en kopieer de timingfunctie direct.
- CSS Text-shadow Generator Gratis online text-shadow generator. Stapel meerdere schaduwlagen met offset, vervaging, kleur en dekking, probeer presets als Neon, 3D of Retro en kopieer de CSS direct.
- CSS Clip-path Generator Gratis online CSS clip-path generator. Ontwerp polygon-, circle-, ellipse- en inset-vormen met sleepbare punten, live voorbeeld en CSS-code kopiëren met één klik.