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
OptiPix CSS Border Radius Generator 允许您通过可视化方式设计圆角。您可以同时控制所有四个角，或单独控制每个角（左上角、右上角、右下角、左下角）。链接或取消链接各个角--当链接时，所有角会一起移动。在高级模式下，您可以为每个角设置水平和垂直半径，以生成完整的 8 值 CSS 语法，从而创建有机形状。实时预览圆角效果在一个可自定义的框上。选择形状预设：圆形 (50%)、胶囊形 (9999px)、Squircle（iOS 应用图标 ~22%）、有机形状、叶形和水滴形。复制生成的 CSS。自定义预览框的大小、背景颜色和边框。所有操作都在您的浏览器本地完成。
How It Works
该工具根据滑块值构建 CSS border-radius 字符串。在简单模式下，它生成 'border-radius: TL TR BR BL'。在高级模式下，它生成带有斜杠分隔的水平和垂直半径的完整 8 值语法。
Use Cases
- •为 Web 应用程序设计圆角 UI 组件
- •为现代设计创建有机形状
- •生成 iOS 风格的 squircle 形状用于应用图标
- •构建自定义按钮和卡片形状
- •尝试非对称圆角以获得独特的布局
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
我可以独立控制每个角吗？
什么是 8 值 border-radius？
有哪些可用的形状预设？
我可以使用百分比而不是像素吗？
是否有任何数据会发送到服务器？
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.