The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
- MDN web docs - border-radius
All Corners
Top Left
Top Right
Bottom Left
Bottom Right
Border Width (Optional)
Border Color (Optional)
Background Color (Optional)
background-color: #090856
border-radius: 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px;
-webkit-border-radius: 30px 30px 30px 30px;
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
- MDN web docs - border-radius
| Value | Note | Example |
|---|---|---|
| length | Uniform circle radius for every corner. | 1em |
| percentage | Uniform ellipse radius for every corner. Horizontal radius is calculated as a percentage of the border box’s width. Vertical radius is calculated as a percentage of the border box’s height. | 50% |
| [value] [value] | First value is top-left and bottom-right corners. Second value is top-right and bottom-left corners. | 10px 20px |
| [value] [value] [value] | First value is top-left corner. Second value is top-right and bottom-left corners. Third value is bottom-right corner. | 10px 20px 30px |
| [value] [value] [value] [value] | First value is top-left corner. Second value is top-right corner. Third value is bottom-right corner. Fourth value is bottom-left corner. | 10px 20px 30px 40px |
[values] / [values] | First set of values specifies horizontal radii. Second set of values specifies vertical radii. | 10px 20px / 5px 10px |