CSS border-top-right-radius Property

The CSS border-top-right-radius property specifies the radius of the top-right corner.

CSS border-top-right-radius Property

Demo:

Click the button to change the border-top-right-radius property (50px) of the DIV element:

Hello

Syntax:

border-top-left-radius: length;

length – specifies the shape of the top-right corner (px/%).

Example:

<!DOCTYPE html> <html> <head> <style>  #example1 {   border: 3px solid #2a9d8f;   padding: 10px;   border-top-right-radius: 25px; }  #example2 {   border: 3px solid #2a9d8f;   padding: 10px;   border-top-right-radius: 50px 20px; }      #example3 {   border: 3px solid #2a9d8f;   padding: 10px;   border-top-right-radius: 30%; } </style> </head> <body>  <h4>border-top-right-radius: 25px;</h4> <div id="example1">   <p>The border-top-right-radius property defines the radius of the top-right corner.</p> </div>  <h4>border-top-right-radius: 50px 20px;</h4> <div id="example2">   <p>If two values are set; the first one is for the top border, the second one for the right border.</p> </div>      <h4>border-top-right-radius: 30%;</h4> <div id="example3">   <p>The CSS border-top-right-radius property is set to 30%.</p> </div>  </body> </html>

Output:




border-top-right-radius: 25px;

The border-top-right-radius property defines the radius of the top-right corner.

border-top-right-radius: 50px 20px;

If two values are set; the first one is for the top border, the second one for the right border.

border-top-right-radius: 30%;

The CSS border-top-right-radius property is set to 30%.



Enjoy coding!

Read also:

CSS border-top-left-radius Property

Advanced CSS Border-radius/ Drop Shape, Lemon Shape, Leaf Shape & Egg Shape