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
O Gerador de Raio de Borda CSS OptiPix permite que você crie cantos arredondados visualmente. Controle os quatro cantos juntos ou individualmente (superior esquerdo, superior direito, inferior direito, inferior esquerdo). Vincule ou desvincule os cantos - quando vinculados, todos os cantos se movem juntos. No modo avançado, defina raios horizontal e vertical por canto para a sintaxe CSS completa de 8 valores que cria formas orgânicas de blob. Visualize o raio da borda em uma caixa personalizável em tempo real. Escolha entre predefinições de forma: Círculo (50%), Pílula (9999px), Squircle (~22%, ícones de aplicativos iOS), Blob Orgânico, Folha e Gota. Copie o CSS gerado. Personalize o tamanho da caixa de visualização, cor de fundo e borda. Tudo é executado localmente no seu navegador.
How It Works
A ferramenta constrói strings CSS border-radius a partir dos valores dos controles deslizantes. No modo simples, ela gera 'border-radius: TL TR BR BL'. No modo avançado, ela gera a sintaxe completa de 8 valores com raios horizontal e vertical separados por uma barra.
Use Cases
- •Projetar componentes de UI arredondados para aplicativos web
- •Criar formas orgânicas de blob para designs modernos
- •Gerar formas squircle no estilo iOS para ícones de aplicativos
- •Construir formas personalizadas de botões e cartões
- •Experimentar com raio de borda assimétrico para layouts únicos
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
Posso controlar cada canto de forma independente?
O que é o raio de borda de 8 valores?
Quais predefinições de forma estão disponíveis?
Posso usar porcentagens em vez de pixels?
Algum dado é enviado para um servidor?
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.