Border-radius-generator
Rond hoeken af en maak organische blob-vormen.
- Direct
- Gratis
- Privé (lokaal verwerkt)
- Zonder registratie
Van klassieke afgeronde hoeken tot trendy blobs
De modus 4 hoeken dekt het dagelijkse: knoppen, kaarten, avatars. De blob-modus gebruikt de acht-waarden-syntaxis voor zachte, organische vormen die erg populair zijn in illustraties en decoratieve achtergronden.
-
Kies de modus
4 hoeken voor eenvoudige afronding, blob voor een organische vorm.
-
Pas de schuifregelaars aan
De knop “Willekeurig” genereert met één klik een unieke blob.
-
Kopieer de CSS
De volledige border-radius-eigenschap, klaar om te plakken.
De syntaxis in twee voorbeelden
| Modus | Gegenereerde CSS |
|---|---|
| 4 gelijke hoeken | border-radius: 16px; |
| Standaard blob | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
| Vóór de / schuine streep | Horizontale stralen van de 4 hoeken |
| Na de / schuine streep | Verticale stralen van de 4 hoeken |
Alles wordt in je browser berekend. Om een afbeelding op de vorm bij te snijden, voeg je overflow: hidden toe op de container.
Veelgestelde vragen
Hoe rond ik één hoek af?
In de modus “4 hoeken” stel je de schuifregelaar van de gewenste hoek in en laat je de andere op 0. De gegenereerde CSS noemt de stralen in de volgorde linksboven, rechtsboven, rechtsonder, linksonder; als alle waarden gelijk zijn, schrijft de tool één waarde.
Wat is de acht-waarden-blob-syntaxis?
border-radius accepteert horizontale en verticale stralen gescheiden door een schuine streep “/”. Bijvoorbeeld geeft “30% 70% 70% 30% / 30% 30% 70% 70%” vier hoeken met asymmetrische stralen — dat maakt die zachte organische vormen.
Waarom percentages in plaats van pixels?
Percentages zijn relatief aan de elementgrootte: de blob behoudt zijn verhoudingen bij elke afmeting. Pixels zijn beter voor een vaste afronding, zoals een knop of kaart met constante hoeken.
Knipt border-radius de inhoud af?
De rand en achtergrond volgen de afronding, maar kindinhoud kan uitsteken. Voeg “overflow: hidden” toe op het element zodat afbeeldingen en inhoud op de afgeronde hoeken worden bijgesneden.