CSS & Design
CSS Border Radius Generator
Generate CSS border-radius with individual corner control and organic blob shapes.
Your files stay on your device - processed locally via WebAssembly, never uploaded
Corners
CSS
border-radius: 16px;
Shape Presets
🔒 All CSS generation happens in your browser. Nothing is sent anywhere.
Embed this tool on your website
Copy this code to add the CSS Border Radius Generator to your site for free. It runs entirely in your visitors' browsers - no API key, no usage limits.
<iframe src="https://optipix.art/embed/border-radius-generator" width="100%" height="600" style="border:1px solid #e4e4e7;border-radius:8px;" title="CSS Border Radius Generator by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/border-radius-generator">OptiPix CSS Border Radius Generator</a></p>
❤️ Love this tool? Support our team.
No ads, no tracking, no limits. Tips keep 104 tools free for everyone.
Secure payment via Stripe · No account needed
About CSS Border Radius Generator
Last updated: May 2026
Met de OptiPix CSS Border Radius Generator ontwerp je afgeronde hoeken visueel. Bedien alle vier de hoeken samen of afzonderlijk (linksboven, rechtsboven, rechtsonder, linksonder). Koppel of ontkoppel hoeken - wanneer gekoppeld, bewegen alle hoeken samen. In de geavanceerde modus stel je zowel de horizontale als verticale straal per hoek in voor de volledige 8-waarde CSS-syntaxis die organische blobvormen creëert. Bekijk de border-radius in realtime op een aanpasbare box. Kies uit vormvoorinstellingen: Cirkel (50%), Pil (9999px), Squircle (~22% app-icoon, zoals iOS), Organische Blob, Blad en Druppel vormen. Kopieer de gegenereerde CSS. Pas de grootte, achtergrondkleur en rand van de preview-box aan. Alles draait lokaal in je browser.
How It Works
De tool construeert CSS border-radius strings op basis van de schuifwaardes. In de eenvoudige modus genereert het 'border-radius: TL TR BR BL'. In de geavanceerde modus genereert het de volledige 8-waarde syntaxis met horizontale en verticale stralen gescheiden door een schuine streep.
Use Cases
- •Ontwerp afgeronde UI-componenten voor webapplicaties
- •Creëer organische blobvormen voor moderne ontwerpen
- •Genereer iOS-achtige squircle vormen voor app-icoontjes
- •Bouw aangepaste knop- en kaartvormen
- •Experimenteer met asymmetrische border-radius voor unieke lay-outs
You Might Also Like
If you find CSS Border Radius Generator useful, check out these related tools: CSS Box Shadow Generator, CSS Gradient Generator, and Glassmorphism Generator. All tools run entirely in your browser with no uploads or signups required.
Explore more: Browse all tools · Step-by-step guides · Tips & tutorials · Compare tools
Frequently Asked Questions
Kan ik elke hoek onafhankelijk besturen?
Wat is de 8-waarde border-radius?
Welke vormvoorinstellingen zijn beschikbaar?
Kan ik percentages gebruiken in plaats van pixels?
Worden er gegevens naar een server verzonden?
Related Tools
CSS Box Shadow Generator
Create CSS box shadows with visual controls, multiple layers, and Material Design presets.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients with a visual editor and presets gallery.
Glassmorphism Generator
Create frosted glass CSS effects with backdrop blur, transparency, and customizable backgrounds.
Neumorphism Generator
Create soft UI / neumorphic CSS effects with light direction, shapes, and component presets.