Menu
This is a shorthand property sets the rounding of the corners of an element.
This shorthand property sets the rounding for the four corners of an element: border-top-left-radius, border-top-right-radius, border-bottom-right-radius and the border-bottom-left-radius properties. Anywhere from one to four values can be used. If the third and/or fourth values are omitted, their values are taken from their opposite corner’s counterparts.
Optionally, another set of one to four values can be provided after a “/” character which allows for the setting of another radius, with which the corner rounding becomes based on an ellipse instead of a circle.
/* One value set for the border-radius, all four corners have the same rounding: */
border-radius: 3px;
/* Two values provided:
the top left and bottom right corners will be rounded
based on a circle with a radius of 5px,
while the top right and bottom left corners
will be rounded based on a circle with a radius of 10px */
border-radius: 5px 10px;
/* Setting all 4 individual corners to be gradually rounder: */
border-radius: 3px 6px 9px 12px;
/* example with percentages:
This can cause elliptical rounding if used on an element that isn't a square,
as the values are based on the width and height of the element itself */
border-radius: 10%;
border-radius: 5% 15%;
/* examples with a second set of radiuses provided, this causes elliptical rounding */
/* using the same values for all corners */
border-radius: 4px / 12px;
/* specifying 4 different values for the first radiuses,
while the second radiuses will get the 3rd and fourth values repeated from the
first and second ones */
border-radius: 1em 12px 1.5em 10px / 1em 2em;length
The length of the radius defined in an explicit length value.
percentage
The length of the radius based on a percentage of the element’s width/height.
initial
Global CSS keyword – this sets the property to the default value.
inherit
Global CSS keyword – this sets the property to be inherited from its parent element.
Have a code example of border-radius? Submit a codepen.io demo and we'll showcase it here ↴
