Design Border Radius
About Border Radius
CSS border-radius rounds the corners of an element's outer border edge. It accepts values in pixels, percentages, or other CSS units.
- Single value:
border-radius: 8px;— applies to all corners - Two values:
border-radius: 8px 16px;— top-left/bottom-right and top-right/bottom-left - Four values:
border-radius: 8px 16px 24px 32px;— top-left, top-right, bottom-right, bottom-left (clockwise) - Percentage:
border-radius: 50%;— creates a circle (on a square) or ellipse - Pill shape: Use a large value like
9999pxfor pill-shaped buttons
Common Border Radius Values
| Shape | CSS | Use Case |
|---|---|---|
| Subtle rounding | 4px | Inputs, small buttons |
| Moderate rounding | 8px | Cards, buttons |
| Heavy rounding | 16px | Modals, hero sections |
| Circle | 50% | Avatars (square element) |
| Pill / Stadium | 9999px | Tags, pill buttons |
| Top only | 12px 12px 0 0 | Tabs, headers |
Frequently Asked Questions
How do I make a circle with CSS border-radius?
Set border-radius to 50% on a square element (equal width and height). For example: width: 100px; height: 100px; border-radius: 50%;
What is the difference between px and % for border-radius?
Pixels (px) give a fixed radius. Percentages (%) are relative to the element's dimensions — 50% on a 200×100px rectangle creates a 100px horizontal and 50px vertical radius (an ellipse).
How do I create a pill-shaped button?
Use a very large border-radius value like 9999px. This ensures fully rounded ends regardless of the button's height.
Can I round just one corner?
Yes. Use four values in clockwise order: top-left, top-right, bottom-right, bottom-left. For example, border-radius: 0 0 20px 0 rounds only the bottom-right corner.
Why doesn't 50% make a circle on my rectangle?
Percentage values are relative to each dimension. On non-square elements, this creates an ellipse. Use pixel values for consistent circular curves on rectangles.
What is the maximum border-radius value?
There is no maximum, but values beyond half the element's smallest side have no additional effect. A 100×50px element looks the same with border-radius: 25px and border-radius: 9999px.
Learn More
Read our comprehensive guide: CSS Border Radius Explained — Syntax, Examples & Common Shapes
Privacy & Limitations
- All calculations run entirely in your browser -- nothing is sent to any server.
- Results are computed locally and should be verified for critical applications.
Related Tools
- Htpasswd Generator -- Generate .htpasswd entries for Apache HTTP basic authentication
- Crontab Generator -- Generate cron expressions visually with next run times
- URL Query Decoder -- Parse and decode URL query parameters
- Regex Cheatsheet -- Interactive regex reference with patterns, examples, and live testing
Related Tools
View all toolsBig-O Notation Visualizer
Interactive plot of O(1) through O(n!) complexity curves with operation count comparison
JSON Formatter
Format and beautify JSON with proper indentation
JSON Validator
Validate JSON syntax and show errors
CSV to JSON Converter
Convert CSV data to JSON format with auto-detection
JSON to CSV Converter
Convert JSON arrays to CSV format with nested object handling
JWT Decoder
Decode JWT tokens and display header and payload
Border Radius Generator FAQ
How do I make a circle with CSS border-radius?
Set border-radius to 50% on a square element (equal width and height). For example: width: 100px; height: 100px; border-radius: 50%;
What is the difference between px and % for border-radius?
Pixels (px) give a fixed radius. Percentages (%) are relative to the element's dimensions — 50% on a 200×100px rectangle creates a 100px horizontal and 50px vertical radius (an ellipse).
How do I create a pill-shaped button?
Use a very large border-radius value like 9999px. This ensures fully rounded ends regardless of the button's height.
Can I round just one corner?
Yes. Use four values in clockwise order: top-left, top-right, bottom-right, bottom-left. For example, border-radius: 0 0 20px 0 rounds only the bottom-right corner.
Why doesn't 50% make a circle on my rectangle?
Percentage values are relative to each dimension. On non-square elements, this creates an ellipse. Use pixel values for consistent circular curves on rectangles.
What is the maximum border-radius value?
There is no maximum, but values beyond half the element's smallest side have no additional effect. A 100×50px element looks the same with border-radius: 25px and border-radius: 9999px.