Belangrijkste punten
- 01Drie modi — uniforme, per-hoek en elliptische — dekken alles van eenvoudige afgeronde knoppen tot organische blob-vormen.
- 02Ondersteunt px, %, en rem eenheden, elk met ander schaalgedrag.
- 03Elliptische modus stelt horizontale en verticale stralen per hoek bloot voor de volledige CSS border-radius syntaxis.
- 04Live preview gebruikt de echte CSS eigenschap, dus wat je ziet is precies wat je browser zal weergeven.
Van eenvoudige afgeronde hoeken tot organische blob-vormen
Een vier-hoek border-radius waarde is gemakkelijk genoeg om uit het hoofd in te typen — border-radius: 8px. Maar zodra je verschillende stralen per hoek nodig hebt, of je wilt de CSS elliptische syntaxis voor organische vormen, wordt de verkorte vorm snel cryptisch. De volledige vorm is top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y — acht waarden in een specifieke volgorde.
Handytool's border-radius generator laat je schuifregelaars voor elke hoek in elke modus verslepen en de vorm live bijwerken. Schakel tussen px, %, en rem zonder herberekening, en kopieer de juiste verkorte of lange CSS declaratie wanneer je klaar bent.
Hoe je een border radius ontwerpt
- 01
Kies een modus
Uniforme modus past één straal toe op alle vier hoeken. Per-hoek modus controleert elke hoek onafhankelijk. Elliptische modus voegt een aparte horizontale en verticale straal per hoek toe.
- 02
Kies een eenheid
Kies px voor absolute maten, % voor waarden die schalen met de afmetingen van het element, of rem voor maten gekoppeld aan de root lettergrootte.
- 03
Sleep de schuifregelaars
Pas de straalwaarden aan en bekijk hoe het preview element live bijwerkt. Voor per-hoek modus sleep je elke hoekschuifregelaar onafhankelijk.
- 04
Bekijk de vorm
Het preview vak past de werkelijke CSS border-radius eigenschap toe, dus de vorm die je ziet is de vorm die je browser zal weergeven.
- 05
Kopieer de CSS
Klik op Kopiëren om de border-radius declaratie te pakken en plak deze in je stylesheet.
Veelvoorkomende vormen en wanneer elke modus te gebruiken
- 01Pil-knop: uniforme % modus, ingesteld op 50% — altijd een volledige pil ongeacht knopbreedte
- 02Kaart met subtiele afronding: uniforme px modus, 8–16px — het meest voorkomende UI patroon
- 03Asymmetrisch label of tag: per-hoek modus, scherp aan één kant, afgerond aan de ander
- 04Avatar cirkel: uniforme % modus, 50% — schaalt met de afbeeldingscontainer
- 05Organische blob vorm: elliptische modus met verschillende X/Y waarden per hoek
Instant preview, niets geüpload
De border-radius generator is volledig aan de clientzijde. Schuifregelaars, modusschakelaars en eenheidswijzigingen werken allemaal de preview onmiddellijk bij zonder serverrondgang. Er is geen account en geen snelheidslimiet.
Het gereedschap werkt in alle moderne browsers. De border-radius eigenschap — inclusief elliptische X/Y syntaxis — wordt ondersteund in elke evergreen versie van Safari, Firefox, Edge en Chrome, dus de uitvoer is veilig om zonder vendor prefixes of fallbacks te gebruiken.
Veelgestelde vragen over Border-Radius Generator
Wat is het verschil tussen px en % voor border-radius?
Pixelstralen zijn absoluut — 16px is altijd 16px. Percentagestralen zijn relatief aan de afmetingen van het element, dus 50% creëert een perfecte cirkel op een vierkant vak en een ellips op een rechthoek.
Wanneer moet ik elliptische modus gebruiken?
Gebruik elliptische modus wanneer je een hoek wilt die meer op één as uitpuilt — voor een horizontale pil, een bladvorming of een organische blob. CSS drukt dit uit als X-stralen / Y-stralen in de border-radius verkorting.
Waarom ziet mijn percentagestraal er verkeerd uit op een niet-vierkant vak?
Horizontale percentages zijn relatief aan de breedte van het element; verticale percentages aan de hoogte. Op een breed, kort element strekken de hoeken zich uit tot ellipsen in plaats van cirkelbogen.
Werkt de uitvoer in elke browser?
Ja — border-radius inclusief elliptische syntaxis wordt ondersteund in elke moderne browser: alle evergreen versies van Safari, Firefox, Edge en Chrome. Geen vendor prefixes nodig.
Hoe maak ik een perfecte cirkel met border-radius?
Stel alle hoeken in op 50% in percentagemodus op een vierkant element. Het element moet ook gelijke breedte en hoogte hebben — gebruik aspect-ratio: 1 / 1 als de grootte dynamisch is.