sets the radius (or radiuses) based on which the top-right corner is rounded.
border-top-right-radius defines the rounding of the top-right corner. If the value is set to
0 (the default value), the corner will be a square, if one value is used, the corner will be rounded based on a circle with that radius, while if two different values are used the corner will be rounded based on the ellipse that is defined by those two radiuses, with the first one being the horizontal and the second one being the vertical rounding.
/* Circle-based rounding */ border-top-right-radius: 3px; border-top-right-radius: 1em; /* Ellipse-based rounding */ border-top-right-radius: 15px 5px; border-top-right-radius: 1em 2em; /* Percentage-based rounding */ /* This sets the rounding to be based on the width/height of the element */ /* This can result in both elliptical and circular rounding, depending if the element is a rectangle or a square. */ border-top-right-radius: 5%; border-top-right-radius: 6% 12%; /* global css keywords */ border-top-right-radius: initial; border-top-right-radius: inherit; border-top-right-radius: revert; border-top-right-radius: unset;
The length of the radius defined in an explicit length value.
The length of the radius based on a percentage of the element’s width/height.
Global CSS keyword – this sets the property to the default value.
Global CSS keyword – this sets the property to be inherited from its parent element.
Have a code example of
border-top-right-radius? Submit a codepen.io demo and we'll showcase it here ↴
Help @reference spread the word by sharing this article on Twitter...Tweet This