HTML Dog
Skip to navigation

CSS Property: border-radius

Rounded corners.

Specifies the radius of a quarter circle or ellipse that forms the corners of the outer-edge of the border area of a box. It is a general corner-rounding property and does not actually require a border for it to take effect.

Corners are cut around the corresponding quarters of a circle (or ellipse) with the specified radius.

A shorthand property that combines border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.

Possible Values

ValueNoteExample
[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
inherit
initial
unset

Example


.box1 { border-radius: 10px; }
/* Corners have rounding made from a circle with a radius of 10 pixels. */

.box2 { border-radius: 10px 20px; }
/* Top-left and bottom-right corners have rounding made from a circle with a radius of 10 pixels.
   Top-right and bottom-left corners have rounding made from a circle with a radius of 20 pixels. */

.box3 { border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }
/* Top-left corner has rounding made from an ellipse with a horizontal radius of 10 pixels and a vertical radius of 5 pixels.
   Top-right corner has rounding made from an ellipse with a horizontal radius of 20 pixels and a vertical radius of 10 pixels.
   Bottom-right corner has rounding made from an ellipse with a horizontal radius of 30 pixels and a vertical radius of 15 pixels.
   Bottom-left corner has rounding made from an ellipse with a horizontal radius of 40 pixels and a vertical radius of 20 pixels. */

Browser support

Can I Use border-radius? Data on support for the border-radius feature across the major browsers from caniuse.com.