Does this tool support percentage values, for circles or ellipses?
No. Every output value is in pixels - there's no unit toggle. To get a percentage-based border-radius (like the 50% needed for a circle), you'll need to write that CSS by hand.
CSS Border Radius Generator – Round Corners with CSS Code
Generate CSS border-radius code online free with a live shape preview. Control each corner independently, from 0 to 200px, and copy pixel-based border-radius CSS - no percentage or blob-shape support.
If this tool isn’t working as expected, please take a screenshot of the error and report the problem here so we can investigate and improve it.
About this tool
Remembering the four-value border-radius order (top-left, top-right, bottom-right, bottom-left) and guessing pixel values from a mental picture is error-prone. This tool lets you drag each corner and see the shape update immediately, then copies the exact value - no manual four-value shorthand to write by hand.
Set a border-radius value for each corner independently on a fixed-size preview box, from 0 to 200px, then copy the CSS. Corners can be linked (one value for all four) or unlinked (each corner set separately) - the output is always a plain pixel value, in the standard border-radius shorthand. This tool doesn't support percentage values or the elliptical slash syntax, so it can't reliably produce true circles or organic blob shapes.
How to Use CSS Border Radius Generator
Link or Unlink Corners
Toggle "Link all corners" for one shared radius, or turn it off to set each corner independently.
Adjust Each Corner
Drag the slider or type a value from 0 to 200px for each corner.
Live Preview
See the shape update in real time as you adjust.
Copy CSS
Copy the border-radius pixel value - one number when linked, four when corners differ.
Common Workflows
Decide: Linked or Independent Corners
Leave "Link all corners" checked for one shared radius, or uncheck it to set each corner separately.
Adjust Each Corner
Drag the slider or type a number (0-200px) for each corner - the live preview updates instantly.
Check the Live Preview
The preview box is a fixed rectangle - use it to judge relative roundness, not to confirm an exact circle or blob shape.
Copy the CSS
Copy gives you a single border-radius value: one number when linked, four when corners differ.
Best For
- Control all four corners together (linked) or independently (unlinked), from 0 to 200px, with a live preview and one-click copy of the resulting border-radius value.
- Output is always in pixels, using the standard border-radius shorthand (one value when linked, four when corners differ) - there's no percentage mode and no elliptical slash syntax, so blob and true-circle shapes aren't reliably achievable through this tool.
- The preview box is a fixed, non-square rectangle - there's no width or height control, so it can't demonstrate a true circle even if you enter a large radius value.
Examples
Linked corners output a single value
Input
Link all corners: on, radius: 24pxResult
border-radius: 24px;When corners are linked, the tool always outputs the one-value shorthand form, applying that radius to all four corners.
Unlinked corners output the four-value shorthand, never longhand properties
Input
Link all corners: off, TL: 24px, TR: 24px, BR: 0px, BL: 0pxResult
border-radius: 24px 24px 0px 0px;The tool always uses the single border-radius property with up to four values - it never outputs individual longhand declarations like border-top-left-radius separately.
No percentage or slash-syntax output exists, at any setting
Input
Any combination of corner valuesResult
Only plain pixel values, like border-radius: 200px; - never a % value and never a value containing a slash (/)There's no unit toggle and no elliptical-corner mode - if you need border-radius: 50% or a slash-syntax blob shape, you'll need to write that CSS by hand.
Use Cases
Rounding all four corners uniformly
Keep corners linked and drag one slider to set a shared radius.
Rounding only specific corners
Unlink corners and set the ones you don't want rounded to 0.
Building a pill-shaped button
Unlink or link corners and set a radius at least half your button's height - the preview box shows this at its own fixed size.
Common Mistakes
Problem
Expecting a percentage option for circles
Solution
There isn't one - the tool only outputs pixel values. A true circle (border-radius: 50%) on your own square element has to be written by hand.
Problem
Expecting to build organic blob shapes
Solution
Blob shapes require the elliptical slash syntax (e.g., 50% 50% 50% 50% / 60% 60% 40% 40%), which this tool doesn't generate.
Problem
Expecting the preview to show a true circle
Solution
The preview box is a fixed non-square rectangle, so it can never display a true circle regardless of the radius value entered.
Problem
Expecting individual longhand output
Solution
The tool always outputs the border-radius shorthand (one or four values) - never separate border-top-left-radius-style declarations.
Tips & Best Practices
For a true circle, write the CSS by hand
Set your element's width and height equal, then use border-radius: 50% directly in your stylesheet - this tool can't generate that value.
Unlink corners for asymmetric rounding
Turn off "Link all corners" whenever you need different corners to have different radii.
Set unwanted corners to 0
For a top-rounded card header, unlink corners and set both bottom corners to 0.
Use a large radius for a pill shape
Set the radius to at least half the element's height in your actual stylesheet - the fixed preview box here is only a guide.
Limitations
Pixel values only - no percentage mode
There's no unit toggle - output is always in px, so percentage-based circles and ellipses can't be generated here.
No elliptical slash syntax or blob shapes
The tool has no 8-value or slash-syntax mode - organic blob shapes aren't achievable through this UI.
Fixed, non-square preview box
There's no width or height control - the preview can't demonstrate a true circle regardless of the radius entered.
Shorthand output only
Always outputs the single border-radius property (one or four values) - never individual longhand corner properties.
No presets
There's no pill, circle, or blob preset button - every shape is built manually with the corner sliders.
No download, export, or reset
Only a Copy button exists.
Comparisons
This Tool vs. an 8-Value Blob Generator
Both round corners, but only one can produce organic, elliptical blob shapes.
| This Tool (4-Corner Pixel Values) | An 8-Value Blob Generator | |
|---|---|---|
| Percentage values | Not supported - pixels only | Usually supported |
| Elliptical slash syntax / blob shapes | Not supported | The core feature |
| Best for | Precise, predictable corner rounding in px | Organic, irregular shapes |
FAQs
The most common question is how to make a perfect circle or an organic blob shape. This tool doesn't support percentage values or the elliptical slash syntax needed for either - it only outputs plain pixel values through the standard border-radius shorthand. For a circle, you'd need to know your element's exact width and height and use CSS's 50% percentage value directly in your stylesheet, which this tool can't generate.
Can it generate blob or organic elliptical shapes (the slash syntax)?
No. The tool has no 8-value or slash-syntax mode - it only ever outputs plain pixel values through the standard border-radius shorthand (one value when corners are linked, four when they're not).
Does it output individual corner properties like border-top-left-radius?
No. The tool always uses the single border-radius shorthand property - it never outputs separate border-top-left-radius, border-top-right-radius, and similar longhand declarations.
What's the maximum radius value, and does the preview show a true circle?
Each corner's slider and number input range from 0 to 200px. The preview box itself is a fixed, non-square rectangle with no width or height control, so it can never display a true circle - only relative roundness for that fixed shape.
What is the CSS border-radius syntax?
border-radius can take 1–4 values. One value: applies to all four corners. Two values: first applies to top-left and bottom-right, second to top-right and bottom-left. Three values: top-left, top-right+bottom-left, bottom-right. Four values: top-left top-right bottom-right bottom-left (clockwise). Example: border-radius: 8px 16px 8px 16px; creates alternating corner rounding. This tool only ever produces the one-value or four-value forms - never the two- or three-value forms.
How do I make a perfect circle with CSS border-radius?
Set border-radius: 50% on an element that has equal width and height. For example: width: 80px; height: 80px; border-radius: 50%; - creates a perfect circle. For non-square elements, 50% creates an ellipse. border-radius: 999px or border-radius: 9999px is an alternative that creates pill shapes for elements of any size, as long as the value exceeds half the element's dimensions. This is general CSS knowledge - this tool itself has no percentage mode and its sliders cap at 200px, so you'll need to write a circle's CSS by hand.
How do I round only the top corners or specific corners?
Use individual corner properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius. Or use shorthand with specific values: border-radius: 12px 12px 0 0; - rounds only the top two corners, leaves the bottom two sharp. This is commonly used for card headers, tab components, and top-attached modals. This tool supports the shorthand approach directly - unlink the corners and set the bottom two to 0.
What is an elliptical border-radius?
CSS border-radius supports elliptical corners using two values separated by a slash: border-radius: 50% / 30%; - 50% horizontal radius, 30% vertical radius, creating an ellipse. The full syntax: border-radius: h-radius / v-radius. This is used for leaf shapes, oval buttons, and organic blob shapes. Example: border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; creates a blob-like shape. This is general CSS knowledge only - this tool cannot generate slash-syntax values like these; it only outputs plain pixel values.
What is the difference between px and % values for border-radius?
Pixel values are fixed regardless of element size - border-radius: 8px always creates an 8px radius corner. Percentage values are relative to the element's dimensions - border-radius: 50% creates a circle on a square element but an ellipse on a rectangle. Use px for UI components where the corner size should stay consistent. Use % when you want the corner rounding to scale proportionally with the element. This tool only produces the px form.
Get more tools like this
Leave your email so we can prioritize similar tools and updates.
Trending Tools
Trending tools will appear as visitors explore the catalog.
Recently Used
Your recently visited tools will show up here.