KOENJP

CSS Border Radius Generator (Blob Shapes)

BORDER · RADIUS

Round each corner separately or all at once, or drag 8 handles to build organic blob shapes with the elliptical 8-value syntax. Includes pill, drop, leaf and egg presets, and copies the border-radius CSS.

Presets

Preview

Corners

Unit

CSS


    


    
Runs in your browser only. Nothing is uploaded.

  

  







  

    

      HOW TO
      
How to use

      
    
      
  1. Start from a preset such as rounded, pill, circle, drop or a blob.
    2. 
      
  2. In 4-corner mode, choose px or %, then adjust each corner or link all four.
    3. 
      
  3. In blob mode, drag the 8 handles on the preview or use the sliders to set horizontal and vertical radii separately. Hit 🎲 for a random shape.
    4. 
      
  4. Change the width, height and color to check it, then copy the code.
    5. 
      

    

    

      PAIRS WELL WITH
      
Pairs well with

      
    

  

  
  

    FAQ
    
FAQ

    
What is the 8-value syntax?
border-radius: four horizontal values / four vertical values. Each corner gets a different horizontal and vertical radius, making elliptical corners — ideal for blob shapes.

    
What's the difference between % and px?
px keeps the same roundness at any size, while % scales with the element's width and height. 50% turns a square into a circle and a rectangle into an ellipse.

    
Can I move the handles with the keyboard?
Yes. Tab to a handle and use the arrow keys to move it 1% at a time, or hold Shift for 10% steps.