Developer Tools
Border Radius Generator
Generate CSS border-radius code for rounded corners. Create custom corner shapes with individual radius controls.
Use Border Radius Generator to get instant results without uploads or sign-ups. Everything runs securely in your browser for fast, reliable output.
Your results will appear here.
About this tool
Border radius creates rounded corners for modern, friendly UI design. Our Border Radius Generator creates CSS code with uniform or individual corner control.
Use percentage values for pills/circles (50%), pixels for buttons/cards (4-8px), or control each corner separately for unique shapes. Works on any block element.
Usage examples
Pill Button
Fully rounded ends
border-radius: 50px; (or 50%)
Card
Subtle rounded corners
border-radius: 8px;
Organic Shape
Different radius per corner
border-radius: 10px 30px 50px 20px;
How to use
- Enter "Radius Value" (all corners or individual).
- Select "Unit" (px, %, rem).
- Optionally set different radii for each corner.
- Click "Generate" to get CSS border-radius code.
Benefits
- CSS border-radius code
- Individual corner control
- Multiple unit support
- Circle/pill shapes
- Custom organic shapes
- Copy-paste ready
FAQs
What is CSS border-radius?
border-radius rounds element corners. Syntax: border-radius: value; Units: px (fixed), % (relative to element size), em/rem (relative to font). Single value = all corners. Four values = top-left, top-right, bottom-right, bottom-left. Negative values not allowed.
How do I make a perfect circle?
For perfect circle: set equal width and height, then border-radius: 50%; Example: width: 100px; height: 100px; border-radius: 50%; For pill shape (oval): set height smaller than width and use border-radius: 50%; Works on square images too.
Can I round only specific corners?
Yes! Four values: border-radius: 10px 0 0 10px; (top-left, top-right, bottom-right, bottom-left). Or individual properties: border-top-left-radius: 10px; border-top-right-radius: 0; Useful for tab shapes, chat bubbles, dropdown menus.
What are good border-radius values?
Common values: Buttons (4-8px), Cards (8-16px), Pills (999px or 50%), Circles (50%), Subtle (2-4px), None (0). Material Design uses 4dp. iOS uses 10-20px. Match border-radius to design system. Bigger radius = friendlier feel.
Can I use border-radius on images?
Yes! Works on img, div with background-image. Add overflow: hidden; to parent if children extend beyond rounded corners. For circular avatars: img { border-radius: 50%; object-fit: cover; width: 100px; height: 100px; }
What is the difference between border-radius in px vs %?
Pixels (px): fixed radius, same on all screen sizes. Percent (%): relative to element dimensions. 50% on square = circle. 50% on rectangle = pill. Use px for consistent corners, % for responsive circles/pills. Calc() can combine: calc(50px + 1%).
Can border-radius affect element performance?
Border-radius is hardware-accelerated on modern browsers with minimal performance impact. Complex shapes with many different radii might trigger repaints. For best performance: use consistent values, avoid animating border-radius (animate transform or opacity instead), keep values reasonable (<100px typically). Round corners generally don't cause noticeable performance issues.
How do I create a stadium/pill shape?
For pill/stadium shape: Set height smaller than width, then border-radius: 999px; or border-radius: 50%; Both work but 999px is simpler (doesn't need equal width/height). Example: width: 200px; height: 50px; border-radius: 50px; Creates perfect rounded ends. Used for pills, tags, and elongated buttons.
Related tools
View all toolsBox Shadow Generator
Generate CSS box-shadow code for depth and elevation effects. Create multiple shadows with custom blur, spread, and color.
Developer ToolsCSS Gradient Calculator
Generate CSS gradient code for linear and radial gradients. Create beautiful color gradients with angle and color stops.
Developer ToolsEM to PX Converter
Convert between em and px units for CSS. Calculate relative font sizes and spacing with em units.
Developer Tools