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:

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;
border-radius

style > framing > border-radiusRound corners

Q