Round corners
border-radius
Adjust the roundness of the element's corners.
Property values
This property sets the four corner radius properties, which can also be set individually:
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
This property can be specified with anywhere from one to four values, with their interpretation as follows:
| number of values | sides effected |
|---|---|
| 1 value | Sets the radius for each of the four corners |
| 2 values | 1st value: top-left corner and bottom-right corner 2nd value: top-right corner and bottom-left corner |
| 3 values | 1st value: top-left corner 2nd value: top-right and bottom-left corners 3rd value: bottom-right corner |
| 4 values | 1st value: top-left corner 2nd value: top-right corner 3rd value: bottom-right corner 4th value: bottom-left corner |
This property can also be specified with a second set of values that follow after a solidus "/". That syntax allows for ellipical corners instead of round corners where the first half of the values specifies the X-axis radius and the second half of the values specifies the Y-axis radius.
Use any of these font-relative typographic units to set the width:
| em | em | The font-size of the current font |
| rem | relative em | The font-size of the <html> element |
| lh | line height | The line-height of the current font |
| rlh | relative line height | The line-height of the <html> element |
| cap | cap height | The nominal height of the current font's capital letters |
| ex | "x" | The height of the current font's "x" glyph |
| ch | "0" | The advance measure (the width) of the current font's "0" glyph |
| ic | ideograph count | The advance measure (the width) of the current font's "水" ideograph |
Or use any of these fixed size units which are independent of the current font:
| % | percent | A percentage of the element's width, and a percentage of the element's height |
| in | inch | A size equal 96px |
| px | pixels | A size equal to 1/96 inch |
| pt | point | A size equal 1in/72 = 1.33px |
| pc | pica | A size equal 1in/6 = 12pt = 16px |
| cm | centimeter | A size equal to 96px/2.54 = 37.8px |
| mm | millimeter | A size equal to 96px/25.4 = 3.8px |
| Q | quarter millimeter | A size equal to 96px/1016 = 0.94px |
Examples
/* all 4 round corners are the same */
border-radius: 20%;
/* each corner is specified separately */
border-radius: 1rem 2rem 1rem 2rem;
/* all 4 ellipical corners are the same */
border-radius: 5px / 20px;
/* each ellipical corner is specified separately */
border-radius: 1rem 2rem 1rem 2rem / 2rem 4rem 2rem 4rem;