CalcaTools

Border Radius Generator | Generate CSS border-radius quickly

SPONSORED
Generate CSS border-radius values visually, controlling each corner independently, with live preview and the exact code to copy. Create circles, pills and custom rounded shapes in seconds.

Last updated: June 2026 · Free · No sign-up required

20px
20px
20px
20px
CSS Code







Frequently Asked Questions






How does the 'Link all corners' option work?


When checked, adjusting the slider of any single corner will instantly apply that exact same border-radius value to all other three corners, producing a symmetric round shape.






What is the syntax for separate corners in CSS?


In CSS, border-radius can accept up to four values (separated by spaces), representing top-left, top-right, bottom-right, and bottom-left respectively (clockwise order).






Can I use percentage values?


This generator focuses on pixel (px) values, which are most common for precise layouts. For a perfect circle, you can set the values to 50% in your stylesheet if the element has equal width and height.





















			
			
			
			
											

					
Quick reference

					
SyntaxEffect
border-radius: 8pxall corners 8px
border-radius: 50%circle / ellipse
border-radius: 10px 0top-left/bottom-right vs others
Four valuesTL, TR, BR, BL clockwise
				

				
								

					

											

							

								info
								CSS Border Radius Generator							

							
Free color tools calculator — enter your numbers and get an instant, accurate result.

						

											

							

								info
								Private by design							

							
Everything runs locally in your browser. No uploads, no accounts, no tracking.

						

											

							

								info
								Works everywhere							

							
Fully responsive and mobile-friendly — calculate on any device, any time.

						

											

							

								info
								Educational							

							
Includes the formula and step-by-step explanation so you understand the math, not just the answer.

						

										

				

				
								

					
Interpretation guide

					
LookSetting
Subtle rounding4–8px
Pill button999px
Circle50% (on a square)
Organic blobdifferent % per corner
				

				
								

					

						lightbulb
						Worked example					

					
Let's say you are using the CSS Border Radius Generator. A free visual tool to generate CSS border-radius values. Control each corner independently and see the result live. Copy the CSS with one click. Enter the values that match your situation into the input fields and press calculate — using realistic numbers makes the result directly useful for you.

										
Result: The calculator instantly applies the formula border-radius: top-left top-right bottom-right bottom-left (clockwise from top-left) and returns the result with appropriate precision.

															
What this means: Read the result in the context of what you are measuring. The step-by-step breakdown lets you confirm the math and understand which input most affects the outcome.

									

				
								

					
Formula & methodology

					

												

							Formula:							border-radius: top-left top-right bottom-right bottom-left (clockwise from top-left)
						

																			
The CSS Border Radius Generator is built on a well-established calculation method. It uses the formula border-radius: top-left top-right bottom-right bottom-left (clockwise from top-left) to turn your inputs into a reliable result. A free visual tool to generate CSS border-radius values. Control each corner independently and see the result live. Copy the CSS with one click. The steps are shown on the page so you can follow the reasoning from input to output.
The generator lets you set each corner radius visually and outputs the exact CSS border-radius rule.
  1. Adjust each corner’s radius and watch the live preview.
  2. Use px for fixed rounding or % for circles and blobs.
  3. The four values run clockwise: top-left, top-right, bottom-right, bottom-left.
  4. Copy the generated border-radius declaration into your CSS.
Worked example: Setting all four corners to 12px outputs border-radius: 12px;.
																			

								Authoritative source:								
									W3Schools Colors								
							

											

				

				
								

					
Frequently asked questions

										

						
How does CSS border-radius work?

						
Enter the required values into the input fields and press the calculate button. The tool applies the formula border-radius: top-left top-right bottom-right bottom-left (clockwise from top-left) and returns the result with a short explanation of each step, so you can check the working yourself.

					

										

						
How do I make a perfect circle in CSS?

						
Use border-radius: 50% on a square element — the percentage radius relative to each side rounds every corner to a circle. For a 100×100 px element, 50% gives a perfect circle; for non-square elements, 50% gives an ellipse. Alternatively, use border-radius: 999px, which caps at half the shortest side and produces a circle or pill. The generator sets the radius live for you to preview.

					

										

						
What does the four-value syntax mean?

						
The CSS Border Radius Generator is a free online tool that a free visual tool to generate css border-radius values. control each corner independently and see the result live. copy the css with one click. You enter a few values, and it returns an accurate result together with a step-by-step explanation, so it works as both a calculator and a quick reference for the underlying concept.

					

										

						
Should I use px or percent?

						
The CSS Border Radius Generator is free, private, and accurate: it runs entirely in your browser (no uploads, no accounts), applies the standard calculation, and explains each step so you can verify the result. A free visual tool to generate CSS border-radius values. Control each corner independently and see the result live. Copy the CSS with one click. There is no limit on usage, and it works on any device.

					

										

						
How do I make a pill-shaped button?

						
Use a very large radius — border-radius: 999px (or 9999px) — on a rectangular button, which clamps each corner to the maximum half-height and produces fully rounded ends: the classic pill or capsule shape. Any radius equal to or greater than half the height works. The generator lets you dial in the radius and copy the exact CSS.

					

										

						
How do I make a perfect circle with border-radius?

						
Set all four corners to 50% — border-radius: 50% makes any square element a perfect circle, and on a rectangle it makes an ellipse. Percentages are relative to the element's own dimensions, which is why 50% always works regardless of size. The live preview shows the result as you drag each corner.

					

										

						
What order do the four values go in?

						
Clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. So border-radius: 10px 20px 30px 40px rounds each corner differently in that order. The tool outputs the shorthand in exactly this sequence, and you can also use the slash syntax for elliptical corners.

					

										

						
Can I make a pill-shaped button?

						
Yes — set the radius to half the element's height on all corners, or simply use a huge value like 999px. For a 48px-tall button, border-radius: 24px (or anything larger) gives the classic pill. The generator's per-corner sliders let you build asymmetric pills too.

					

										

						
Why do my percentage radii look different on rectangles?

						
Because horizontal percentages resolve against the width and vertical ones against the height — 50% on a 200×100 box gives an ellipse, not a circle. Use pixel values when you want identical curvature on non-square elements. The tool shows both px and % so you can pick the right unit for the shape.

					

									

				
							
			
			
			
			
			
			
			
			
						

				
Explore the full color toolkit

								
Every CalcaTools color tool — pickers, converters, gradients, and shadows for designers and developers.