CodeNimbleToolsFree Online Developer Tools
Explore tools

Border Radius Generator

Design simple or asymmetric CSS border radii and preview the result instantly.

Tool input is processed locally in your browser and is not submitted to CodeNimbleTools. Avoid pasting production secrets into any device or website you do not fully trust.


  





  

    
About this tool
Rounded corners are often treated as one number, but CSS can control all four corners independently. The Border Radius Generator previews top-left, top-right, bottom-right and bottom-left values and returns the shortest practical border-radius declaration for the selected shape.
Equal values produce familiar cards and buttons; asymmetric values can create labels, speech-bubble bases, image masks and more distinctive panels. Very large values relative to an element's size are automatically constrained by the browser, which is why 9999px is commonly used for pill shapes. Pair rounded corners with the Box Shadow Generator for elevated cards, but keep both effects restrained so the interface remains clear.
    
How to use it
  1. Enter the radius for the top-left, top-right, bottom-right and bottom-left corners.
  2. Watch the preview to confirm the shape remains balanced at the intended component size.
  3. Use matching values for conventional cards or different values for an asymmetric shape.
  4. Copy the generated CSS declaration.
  5. Test the radius with real content, borders and overflow behavior before using it site-wide.
    
Useful ways to apply it
  • Creating rounded cards, buttons, inputs, avatars and image containers.
  • Building pill-shaped navigation items and status badges.
  • Making asymmetric promotional panels or decorative image crops.
  • Matching corner values from a design file without rewriting shorthand manually.
  • Standardizing radii before moving them into CSS custom properties.

          
Worked example

      

        
Example input
Top-left 48px; top-right 12px; bottom-right 48px; bottom-left 12px

        
Expected output
border-radius: 48px 12px 48px 12px;

      

    
          
Edge cases to check

      
  • Very large radii are normalized by the browser when they exceed the box dimensions.
  • Percent radii behave differently from fixed pixel values.
  • Elliptical two-axis radii are outside this simple four-corner generator.

    
    
Known limitations

    
This generator emits common pixel corner radii; it does not model every elliptical or percentage-based border-radius syntax.


    

      
How this tool was reviewed

      
Reviewed with equal, asymmetric, zero and oversized pixel radii in the preview.

      
Last reviewed: September 3, 2026 · Maintainer: William

              
Standards and technical references

        
            
See the site-wide testing methodology for fixture categories, privacy checks and correction policy.

    

  

    

    
Frequently asked questions

          
In what order are four border-radius values applied?
The order is top-left, top-right, bottom-right and bottom-left, moving clockwise from the top-left corner.

          
How do I make a perfect circle?
Use a square element and set border-radius to 50 percent. A non-square element with 50 percent creates an ellipse.

          
Why does a very large radius stop getting rounder?
Browsers scale overlapping corner curves so they fit inside the box. Once the shape reaches a pill or circle, larger pixel values look the same.

          
Does border-radius clip child content?
Not by itself in every case. Add overflow hidden when images or child backgrounds must be clipped to the rounded edge.

      

    
 Privacy
Tool input is processed locally in your browser and is not submitted to CodeNimbleTools. Avoid pasting production secrets into any device or website you do not fully trust.