Generator voor afgeronde hoeken
Genereer per-hoek CSS border-radius met een livevoorbeeld.
Snel antwoord: Generator voor afgeronde hoeken: maak CSS border-radius per hoek met een livevoorbeeld. Werkt volledig in je browser, gratis en zonder aanmelding.
Laatst bijgewerkt
Goed om te weten
Rounded corners feel simple until you need each corner different, and that is exactly what per-corner control unlocks. Matching modest radii on all four corners gives the friendly, neutral look of most buttons and cards; deliberately mismatched radii produce the soft, organic "blob" shapes that have become a common decorative element behind hero sections and avatars.
One thing worth knowing is the difference between pixel and percentage radii. Pixels give a fixed corner regardless of element size, while a percentage scales with the box — a 50% radius on a square produces a perfect circle, which is the standard trick for round avatar frames. The generator emits pixels in the UI, but swapping px for % in the output is a one-character change.
Because border-radius is an animatable property, adding a CSS transition on it lets a shape morph smoothly between two states on hover. Pair the result with the Box Shadow Generator for depth or the Gradient Generator for a fill, and you have the building blocks of a modern card in a couple of copy-pastes.
Veelgestelde vragen
- Is het gratis?
- Ja — gratis zonder registratie.
- Kan ik blob-vormen maken?
- Ja — geef elke hoek een heel andere straal voor een organische blob.
- Welke eenheden worden ondersteund?
- Pixels in de UI; vervang px door % in de output voor een percentage-gebaseerde straal als je dat verkiest.
- Worden mijn instellingen geüpload?
- Nee — de preview draait volledig in je browser.
- Is het geanimeerd?
- Pas een CSS-overgang toe op de border-radius eigenschap in je stylesheet om te animeren tussen twee waarden.