CalcaTools

Border Radius Generator | Generate CSS border-radius quickly

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.

					

										

						
What does the CSS Border Radius Generator do?

						
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 calculator takes your inputs, applies the standard calculation, and returns a clear result so you can make an informed decision without doing the math by hand.

					

										

						
What formula does the CSS Border Radius Generator use?

						
It outputs the border-radius shorthand in clockwise order: border-radius: top-left top-right bottom-right bottom-left, each value in pixels or percent. Enter up to four radii and the tool generates the CSS, with 50% producing a circle on square elements and 999px creating the pill shape. The live preview updates as you adjust each corner.

					

										

						
Is the CSS Border Radius Generator free and private?

						
Yes — the CSS Border Radius Generator. There is no sign-up, no paywall, no trial, and no limit on how many calculations you can run. CalcaTools covers its costs with non-intrusive display advertising, so the calculator itself never asks for payment or restricts any feature.

					

										

						
How accurate is the CSS Border Radius Generator?

						
The CSS Border Radius Generator applies the standard formula: border-radius: top-left top-right bottom-right bottom-left (clockwise from top-left). It is tested against published worked examples before launch and uses native double-precision arithmetic, so results are accurate to typical precision for the values you enter — with no intermediate rounding that could distort the answer.

					

									

				
							
			
			
			
			
			
			
			
			
						

				
Explore the full color toolkit

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