CSS Border Radius Generator

Design any shape from pill buttons to organic blobs. Control each corner individually or use elliptical radii for advanced shapes.

Generated CSS 

      

    

  






  

    
How to Use the CSS Border Radius Generator

    
Toggle Link all corners to control all four corners simultaneously with a single slider — perfect for uniform rounding. Unlink them to set each corner independently: top-left, top-right, bottom-right, and bottom-left each get their own slider. Enable Elliptical radii to define separate horizontal (X) and vertical (Y) radii for each corner, unlocking the full power of CSS organic shape generation.


    
Shorthand vs Longhand border-radius

    
The border-radius shorthand accepts one to four values. One value applies to all corners uniformly. Two values set top-left/bottom-right and top-right/bottom-left pairs respectively. Three values set top-left, then top-right/bottom-left, then bottom-right. Four values follow clockwise order: top-left, top-right, bottom-right, bottom-left — matching the convention of margin and padding shorthand.

    
The longhand properties — border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius — each accept one or two values (horizontal and vertical radii). The generator outputs the most concise form automatically.


    
Elliptical Radii

    
The slash (/) syntax in the border-radius shorthand separates horizontal radii from vertical radii: border-radius: 50px 20px / 30px 60px. This creates corners that are elliptical rather than circular, enabling a vast range of organic, blob-like, and asymmetrical shapes that would be impossible with uniform circular radii.

    
The formula is always: border-radius: [horizontal values] / [vertical values]. Each side of the slash follows the same 1–4 value shorthand rules as the regular property.


    
CSS Shapes You Can Create

    
    
      
  • Circle: Set all corners to 50% on a square element — border-radius: 50%
    • 
      
  • Pill / Capsule: Set a very large radius on a wide element — border-radius: 100px
    • 
      
  • Squircle: ~40–45% radius produces Apple-style rounded squares
    • 
      
  • Organic blob: Use large, asymmetric elliptical radii like 60% 40% 70% 30% / 30% 60% 40% 70%
    • 
      
  • Speech bubble base: One corner set to 0 with others rounded
    • 
      
  • Leaf: Two adjacent corners at 50%, the other two at 0
    • 
    


    
Browser Support

    
border-radius has universal support across all modern browsers. Percentage values are calculated relative to the element's dimensions, so a 50% radius on a non-square element produces an ellipse. The elliptical slash syntax is also universally supported in modern browsers — there is no need for vendor prefixes in any current project.


    
Practical Examples

    
Avatar Circle

    
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
}


    
Pill Button

    
.pill-btn {
  padding: 10px 24px;
  border-radius: 100px;
}


    
Organic Blob Card

    
.blob-card {
  border-radius: 60% 40% 70% 30% / 30% 60% 40% 70%;
  padding: 40px;
}


    
Squircle Icon

    
.app-icon {
  width: 80px;
  height: 80px;
  border-radius: 22px;
}