CSS border-top-right-radius Property

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

CSS border-top-right-radius property has two values: length and percentage. The border-top-right-radiusproperty specifies the horizontal and vertical radii that defines the rounded upper-right corner for a border box.

When only one value is given, that value specifies both horizontal and vertical radius of the ellipse. If there are two values given, the first value sets the horizontal radius and the second value sets the vertical radius.

Percentages for the horizontal radii refer to the width of the box, 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

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

Let’s try an example where only one value is used. It defines both top border and right border of the ellipse.

Example

<!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>

Another example where two values are given. The first one defines the top border of the ellipse, the second one defines the right border of the ellipse.

Example

<!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>

Consider another example with percentages.

Example

<!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>

Values

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

Related Resources

Border, border-radius, border-top, border-bottom, border-left, border-right, border-bottom-right-radius, border-bottom-left-radius, border-top-right-radius, background-clip.




Related articles