Hoekafronding genereren
Maak CSS-eigenschappen voor border-radius
Invoer en opties
Snelle voorinstellingen en voorbeelden
Draait in uw browser. Uw invoer blijft op dit apparaat.
Resultaten
Voer uw waarden in om het resultaat te zien.
Over Hoekafronding genereren
Met onze gratis CSS-generator voor border-radius hebt u volledige visuele controle over afgeronde hoeken van elk HTML-element. Pas elke hoek apart aan of koppel ze allemaal, kies uit meerdere eenheden (px, %, em, rem) en zie het resultaat direct in het live voorbeeld.
Afgeronde hoeken zijn een vast onderdeel van modern webdesign. Van subtiele afrondingen van 4px op kaarten en invoervelden tot volledige cirkels van 50% voor avatars: de border-radius-eigenschap bepaalt hoe gebruikers uw interface ervaren. Met deze tool vindt u moeiteloos de exacte waarden, zonder te gokken of steeds de browser te verversen.
De generator bevat 10 vooraf ingestelde vormen, zoals Vierkant, Cirkel, Pil, Druppel en Organisch, plus een willekeurige generator om te experimenteren. De uitvoer is beschikbaar in meerdere formaten, waaronder CSS-shorthand, afzonderlijke hoekeigenschappen, een kant-en-klare CSS-klasse en een benaderend Tailwind CSS-equivalent.
Belangrijkste functies
- Onafhankelijke controle over elke hoek: linksboven, rechtsboven, rechtsonder en linksonder
- Schakelaar om hoeken te koppelen voor een gelijke afronding op alle vier de hoeken
- Vier eenheden: pixels (px), procenten (%), em en rem voor responsieve ontwerpen
- Realtime voorbeeld met instelbare elementgrootte (100-300px) en een eigen kleurkiezer
- 10 vooraf ingestelde vormen: Vierkant, Afgerond, Cirkel, Pil, Boven afgerond, Onder afgerond, Links afgerond, Rechts afgerond, Druppel en Organisch
- Visuele indicatoren met de exacte afronding bij elke hoek
- Generator voor willekeurige afrondingen voor inspiratie en experimenten
- Meerdere CSS-uitvoerformaten: shorthand, afzonderlijke eigenschappen, CSS-klasse en een Tailwind CSS-benadering
- Kopiëren naar het klembord met één klik, direct klaar voor gebruik in uw projecten
- Schuifregelaars met bereikweergave voor het intuïtief aanpassen van waarden
Zo gebruikt u Hoekafronding genereren
- Kies uw eenheid: Kies px voor vaste afmetingen, % voor responsieve schaling of em/rem voor afmetingen op basis van typografie.
- Pas de hoekwaarden aan: Stel met de schuifregelaars de afronding van elke hoek apart in, of schakel „Alle hoeken koppelen” in voor een gelijkmatige afronding.
- Probeer de vooraf ingestelde vormen: Klik op een van de 10 vormen, zoals Cirkel, Pil of Druppel, om gangbare configuraties direct toe te passen.
- Bekijk het resultaat: Bekijk het live voorbeeld met instelbare grootte en kleur om precies te zien hoe uw border-radius eruitziet.
- Kopieer de CSS: Klik op Kopiëren om de CSS-code voor border-radius over te nemen, of gebruik het onderdeel met alternatieve formaten voor afzonderlijke eigenschappen of Tailwind-klassen.
Toepassingen
- Knoppen opmaken: Maak pilvormige knoppen, subtiel afgeronde call-to-action-knoppen of volledig ronde pictogramknoppen.
- Kaartcomponenten: Pas consistent afgeronde hoeken toe op kaarten, modals en dialoogvensters in uw designsysteem.
- Avatarafbeeldingen: Gebruik een border-radius van 50% op vierkante afbeeldingen voor perfect ronde gebruikersavatars en profielfoto's.
- Invoervelden: Geef formulierinvoer, tekstvakken en keuzelijsten een lichte afronding voor een moderne uitstraling.
- Navigatie-elementen: Maak tabbladen, badges, tags en navigatie-items op met passende afgeronde hoeken.
- Creatieve vormen: Combineer asymmetrische hoekwaarden voor organische blobs, druppels en unieke decoratieve elementen.
- Tooltips en popovers: Pas nauwkeurige hoekafronding toe op tooltips, popovers en dropdownmenu's.
- Responsieve design tokens: Leg consistente border-radius-waarden voor uw hele project vast met em- of rem-eenheden.
Veelgestelde vragen
Is deze tool gratis?
Ja, Hoekafronding genereren is volledig gratis en zonder beperkingen. U kunt de tool zo vaak gebruiken als u wilt, zonder registratie of betaling.
Zijn mijn gegevens veilig?
Absoluut. De tool draait volledig in uw browser. Er worden geen gegevens naar een server verzonden, dus uw instellingen en gegenereerde CSS-code blijven privé op uw apparaat.
Wat is het verschil tussen px en % bij border-radius?
Pixelwaarden (px) geven een vaste afronding, ongeacht de grootte van het element. Procentwaarden (%) zijn relatief aan de afmetingen van het element en dus responsief. Zo levert 50% op een vierkant element een perfecte cirkel op.
Hoe maak ik een perfecte cirkel met CSS?
Stel border-radius in op 50% bij een element met gelijke breedte en hoogte. De voorinstelling Cirkel in deze tool past precies die configuratie toe.
Wordt border-radius in alle browsers ondersteund?
Ja, de CSS-eigenschap border-radius wordt volledig ondersteund in alle moderne browsers, waaronder Chrome, Firefox, Safari, Edge en Opera. Vendor-prefixes zijn niet nodig.
Tips & best practices
- Gebruik consistente waarden: Leg in uw designsysteem 2-3 standaardwaarden voor border-radius vast (bijvoorbeeld 4px, 8px, 16px) voor visuele consistentie.
- Gebruik procenten voor cirkels: Stel 50% in op vierkante elementen voor perfecte cirkels die automatisch meeschalen met de grootte.
- Houd het subtiel bij formulieren: Kleine waarden (2-8px) werken het best voor invoervelden en formulierelementen en houden de uitstraling strak en professioneel.
- Probeer asymmetrische hoeken: Verschillende waarden per hoek geven unieke vormen die decoratieve elementen karakter kunnen geven.
- Overweeg responsieve eenheden: Gebruik em of rem voor border-radius-waarden die proportioneel meeschalen met uw typografie.
- Test met inhoud: Controleer altijd hoe afgeronde hoeken eruitzien met echte inhoud in het element, vooral bij verschillende venstergroottes.