Border Radius Generator
Round all four corners or each one on its own, and copy the border-radius line.
CSS
Make Rounded Corners with CSS
Rounded corners soften cards, buttons, avatars and images. This page opens the CSS Generator on its border radius tab, where you can round all corners together or shape each one.
Examples
| CSS | Shape |
|---|---|
border-radius: 8px; | Gently rounded card or button |
border-radius: 50%; | Circle on a square, such as an avatar |
border-radius: 999px; | Pill-shaped button or tag |
border-radius: 24px 24px 0px 0px; | Only the top corners rounded, as on a bottom sheet |
Pixels or percent
Pixel values keep the same curve whatever the size of the element, which suits buttons and cards. Percent values grow with the element, and each corner is measured against its width and height separately, so on a rectangle the curve becomes elliptical.
Related tools
To add a shadow to the rounded element, see the box shadow generator. For a gradient fill, see the CSS gradient generator.