Border-top-right-radius

In this chapter we will learn how to use the border-top-right-radius property.

The border-top-right-radius CSS property sets the rounding of the top-left corner of the element.

The border-top-right-radius property specifies the horizontal and vertical radii that defines the rounded upper-right corner for a border box.

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

CSS Syntax

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

Let's see an example:

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

       <div></div>
       
   </body>
</html>

Let's see an example:

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

       <div></div>
       
   </body>
</html>

Property Values

Value Descriptions
length It is used to set the rounding of the top-right corner.
% It is used to set the rounding of the top-right corner in percent.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.