border-top-right-radius

The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.

/* the corner is a circle */
/* border-top-right-radius: radius */
border-top-right-radius: 3px;

/* the corner is an ellipse */
/* border-top-right-radius: horizontal vertical */
border-top-right-radius: 0.5em 1em;

border-top-right-radius: inherit;

/* Global values */
border-top-right-radius: inherit;
border-top-right-radius: initial;
border-top-right-radius: revert;
border-top-right-radius: unset;

With one value:

• the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.

With two values:

• the first value is a <length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
• the second value is a <length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner.

<length-percentage>

Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. As absolute length it can be expressed in any unit allowed by the CSS <length> data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.

<length-percentage>{1,2}
where 
<length-percentage> = <length> | <percentage>

A single <length> value produces an arc of a circle.

<div></div>

div {
  border-top-right-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Two different <length> values produce an arc of an ellipse.

<div></div>

div {
  border-top-right-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

A square element with a single <percentage> value produces an arc of a circle.

<div></div>

div {
  border-top-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

A non-square element with a single <percentage> value produces an arc of an ellipse.

<div></div>

div {
  border-top-right-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}

• border-radius shorthand property
• border-bottom-right-radius, border-bottom-left-radius, and border-top-left-radius