◻️

Border Radius Generator

Create custom CSS border-radius shapes with independent corner control

Quick Shapes
CSS Output

        

        
        

          
CSS Border Radius Generator

          
The CSS border-radius property allows you to round the corners of any HTML element. You can set all corners to the same value using the shorthand, or control each corner independently for creative shapes.

          
CSS Border Radius Syntax

          
Single value: border-radius: 12px; — applies to all corners

          
Four values: border-radius: TL TR BR BL; — top-left, top-right, bottom-right, bottom-left

          
Creative Shapes

          
  • Circle/Oval: border-radius: 50%
  • Pill: Very high value like 999px
  • Leaf: Two opposite corners rounded
  • Teardrop: One corner fully rounded