{ CSS Border Radius Generator }

// craft perfect border-radius shapes visually

Build border-radius shapes visually with sliders for all 8 corner handles. Supports symmetric, asymmetric, and elliptical corners. Copy CSS instantly — free, no sign-up.

// ALL CORNERS
// INDIVIDUAL CORNERS
Top Left
H
V
Top Right
H
V
Bottom Left
H
V
Bottom Right
H
V
// PRESETS
// PREVIEW SETTINGS
#c084fc
200px
200px
// LIVE PREVIEW
// CSS OUTPUT
SHORTHAND

          

          
          

            
LONGHAND

            

          

        

      


    


  







  

    

      
HOW TO USE

      
    
        
  1. 01
    Move the sliders
    Use the All Corners slider to set a uniform radius, or unlock individual corners to set different values for top-left, top-right, bottom-left, and bottom-right.
    2. 
        
  2. 02
    Set H and V independently
    Each corner has a horizontal (H) and vertical (V) radius. Unequal H and V values create elliptical corners — the CSS / separator syntax.
    3. 
        
  3. 03
    Copy shorthand or longhand
    The CSS output shows both the compact shorthand and the four individual property equivalents. Copy whichever format fits your codebase.
    4. 
      

    

    

      
FEATURES

      

        8 corner handles
        H + V radii
        Elliptical corners
        px and %
        Preset shapes
        Blob randomizer
      

      
USE CASES

      
    
        
  • ⬡ Design button and card corner styles
    • 
        
  • ⬡ Create pill, circle, and leaf shapes
    • 
        
  • ⬡ Generate organic blob shapes for backgrounds
    • 
        
  • ⬡ Learn the elliptical border-radius / syntax
    • 
        
  • ⬡ Build asymmetric UI element corners
    • 
      

    

    

      
WHAT IS THIS?

      
CSS Border Radius Generator is a visual tool for crafting border-radius values with full control over all 8 corner handles — horizontal and vertical radius for each of the 4 corners. It outputs both the shorthand and longhand CSS, handles the elliptical / separator, and includes preset shapes and an organic blob randomizer.

      
RELATED TOOLS

      

        ⊞ Grid Generator
        🎨 Color Converter
        ✦ CSS Beautifier
        🔘 Button Generator
        ⏳ Spinner Generator
      

    

  







  

    
FREQUENTLY ASKED QUESTIONS

    

      

        

          What does the / separator in border-radius mean?
          
The / separator in border-radius separates the horizontal radii from the vertical radii. For example, border-radius: 40px 20px / 20px 40px sets the top-left and bottom-right corners to have a 40px horizontal and 20px vertical radius (creating an elliptical arc), while top-right and bottom-left get a 20px horizontal and 40px vertical radius. Without the separator, both axes are equal.

        

        

          When should I use % instead of px?
          
Use % values when you want the radius to scale proportionally with the element size. 50% always produces a circle or ellipse regardless of the element's dimensions. Use px when you want a fixed corner curve that stays the same size regardless of how the element scales — common for buttons and cards with consistent corner styles.

        

        

          How do I make a perfect circle?
          
Set border-radius: 50% on an element with equal width and height. The 50% value makes each corner radius equal to half the element's dimension, meeting in the middle to form a circle. If the width and height differ, you get an ellipse.

        

      

      

        

          What is a squircle?
          
A squircle is a shape halfway between a square and a circle — a rounded square with a very specific corner curve that appears more natural than a standard rounded rectangle. In CSS, it is approximated with a large border-radius value (around 30% or more) applied uniformly to all four corners. The iOS app icon shape is a well-known example of a squircle.

        

        

          What is the shorthand vs longhand border-radius?
          
The shorthand border-radius property sets all corners in one declaration. The longhand properties — border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius — set each corner individually and each accepts two values for horizontal and vertical radii. The longhand is clearer when overriding a single corner in a specific state or component.

        

        

          How are organic blob shapes created?
          
Blob shapes use the elliptical border-radius syntax with very different H and V values per corner. By setting large asymmetric percentages on opposite corners and small values on adjacent corners, the shape loses its rectangular nature and becomes organic-looking. The randomize button generates a new set of blob values each time you click it.

        

      

    

  







  

    
CSS Border Radius Generator — Visual Tool for Every Shape

    
border-radius is one of the most visually expressive CSS properties, capable of producing anything from a subtle rounded rectangle to a perfect circle, an organic blob, a pill-shaped button, or a leaf. Most developers only use its simplest form — a single uniform value — but the full property supports eight independent values via the elliptical radius syntax, enabling an enormous range of shapes without any SVG or JavaScript.


    
The Full border-radius Syntax

    
The complete border-radius shorthand accepts up to eight values in two groups separated by a forward slash. The values before the / are the horizontal radii of the four corners (top-left, top-right, bottom-right, bottom-left in clockwise order). The values after the / are the vertical radii in the same order. If the two groups are identical, the / is omitted and both axes share the same values. This tool exposes all eight handles so you can build any shape the property supports.


    
Symmetric vs Asymmetric Corners

    
A symmetric border radius applies the same value to all four corners — the most common usage for buttons and cards. An asymmetric radius applies different values to different corners, which can be used to create directional shapes like speech bubbles (one sharp corner, three rounded), leaf shapes (two adjacent large corners, two small), or organic forms where each corner differs. The "Link all" toggle on this tool makes symmetric editing fast while giving you the freedom to break symmetry whenever you need it.


    
Elliptical Corners

    
When the horizontal and vertical radii of a corner differ, it creates an elliptical arc rather than a circular one. A corner with 60px horizontal and 20px vertical radius creates a shallow, wide arc. Reversing these — 20px / 60px — creates a tall, narrow arc. Combining different elliptical radii across all four corners produces the organic blob shapes popular in modern UI design.


    
px vs Percentage

    
Percentage values for border-radius are calculated relative to the element's border box dimensions. Horizontal percentages are relative to the width; vertical percentages are relative to the height. This means 50% always produces a circle on a square element, and an ellipse on a rectangular one — regardless of the actual pixel dimensions. Fixed px values produce a consistent arc size regardless of element scaling, which is preferable for design systems where corner rounding should remain constant.


    
Preset Shapes

    
The preset buttons demonstrate common use cases. Sharp sets all radii to zero — a rectangle. Soft applies a subtle 8px radius for modern UI components. Pill sets a large value that produces fully rounded ends on a wide element. Circle applies 50% uniformly. Leaf uses asymmetric large and small values on adjacent corners to create a curved leaf silhouette. Squircle approximates the smooth rounded square used in app icon design. The Blob preset randomises all eight radii to generate a new organic shape each click.

  







☕