// by seankriegler.com
CSS Border Radius Generator
Adjust each corner independently. Toggle elliptical mode for organic shapes.
20px
20px
20px
20px
20px
// Syntax
border-radius: top-left top-right bottom-right bottom-left;
// Percent vs Pixels
Percent values stretch with the element; pixels stay constant. 50% on a square = perfect circle.
// Blob Shapes
Click Random Blob to generate organic asymmetric shapes great for hero backgrounds and avatars.
// Browser Support
border-radius works in every browser since IE9. Safe to use everywhere.