CSS Border Radius Generator

Shape any corner with sliders and a live preview. Set each corner radius, watch the box change, then copy the ready-made border-radius CSS for your stylesheet. Free, instant and private, with no sign-up needed.

Preview










How to Use





    

  1. Move the four sliders to set the radius of each corner, from 0 to 100 pixels.
    2. 

  2. Preview the rounded shape live in the box above.
    3. 

  3. Click Copy CSS and paste the border-radius declaration into your stylesheet.
    4. 






Key Features





    

  • Live preview – the shape updates as you drag each slider.
    • 

  • Four-corner control – set every corner individually.
    • 

  • Ready-made CSS – a clean border-radius declaration to paste anywhere.
    • 

  • 100% private – everything runs in your browser; nothing is sent anywhere.
    • 






FAQs





Is this CSS border radius generator free?





Yes. It is completely free with no sign-up and no limits.





What CSS does it output?





It outputs a standard border-radius declaration, for example: border-radius: 16px 16px 16px 16px;. The four values are top-left, top-right, bottom-right and bottom-left.





Can I make a circle with it?





Set all four sliders to the same value. On a square box, half the box’s width as the radius gives a perfect circle.





Is my data stored anywhere?





No. The shape is built entirely in your browser and nothing is transmitted or saved.





Related Tools





CSS Box Shadow Generator · CSS Text Shadow Generator · CSS Gradient Generator


	
	



	
	



			

			
		
	



	
 
	


	





	
                
                	Scroll to Top