border-top-right-radius

sets the radius (or radiuses) based on which the top-right corner is rounded.

Syntax

The 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;

Values

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.

Browser Compatibilty

Demos

Have a code example of border-top-right-radius? Submit a codepen.io demo and we'll showcase it here ↴