CSS border-top-right-radius Property

The CSS border-top-right-radius defines the round shape of the top right corner of the element.

This property is one of the CSS3 properties.

There are three kinds of rounding. It can be a circle or an ellipse, or the value is 0, the corner is square. If you use a background image or color, it will be clipped at the border. The process of clipping is defined by the value of the background-clip property.

The property accepts length, percentage, initial, and inherit values. The border-top-right-radius property specifies the horizontal and vertical radii that define the rounded upper-right corner for a border box. When only one value is given, that value specifies both the horizontal and vertical radii of the ellipse. If there are two values, the first one sets the horizontal radius and the second one sets the vertical radius. Percentages for the horizontal radius refer to the width of the box, and percentages for the vertical radius refer to the height of the box. Negative values are not allowed.

Initial Value	0
Applies to	All elements. It also applies to ::first-letter.
Inherited	No.
Animatable	Yes. Top right border is animatable.
Version	CSS3
DOM Syntax	object.style.borderTopRightRadius = "25px";

Syntax

Syntax of CSS border-top-right-radius Property

border-top-right-radius: length | % | initial | inherit;

Let’s try an example where only one value is used. It defines both the horizontal and vertical radii of the ellipse.

Example of the border-top-right-radius property:

Example of CSS border-top-right-radius Property with only one value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 40px;
        background: #666;
        border: 4px solid #000000;
        border-top-right-radius: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-right-radius example.</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

When two values are provided, the first defines the horizontal radius and the second defines the vertical radius.

Result

Example of the border-top-right-radius property with two values:

Example of CSS border-top-right-radius Property with two values

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 40px;
        background: #666;
        border: 4px solid #000000;
        border-top-right-radius: 35px 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-right-radius example.</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Example of the border-top-right-radius property in percentages:

Example of CSS border-top-right-radius Property with % (percentages) value

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 40px;
        background: #1c87c9;
        border: 4px solid #000000;
        border-top-right-radius: 60% 30%;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-right-radius example.</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Values

Value	Description	Play it
length	Defines the round shape of the top-right corner.	Play it »
%	Defines the round shape of the top-right corner in %.	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.

Practice

What does the CSS property 'border-top-right-radius' do?

It sets the shape of the border in the top-right corner.
It sets the color of the border in the top-right corner.
It sets the width of the border in the top-right corner.
It is used to give the top-right corner rounded corners.