CSS | border-top-right-radius Property

The border-top-right-radius property in CSS is used to define the radius of the right top corner of the border of a given element. The border-top-right-radius is used to draw a rounded corner at top-right part of the container. The border-radius is used to set all radius corner of container at once with same value of radius, border-top-right-radius specifically set the top-right border.

Syntax:

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

Property Value: The border-bottom-right-radius property values are listed below:



  • length: It is used to specify the radius of the right top corner in fixed length in px, em etc. The default value is 0.
  • percentage %: It is used to specify the radius of the right top corner of the border in percentage.
  • initial: It is used to set border-top-right-radius property to its default value.
  • inherit: This property is inherited from its parent element.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            border-top-right-radius property 
        </title
  
        <style
            #length { 
                border-color: green; 
                border-style: solid; 
                border-top-right-radius: 20px; 
            
            #percentage { 
                border-color: green; 
                border-style: solid; 
                border-top-right-radius:59%; 
            
            #inherit { 
                border-color: green; 
                border-style: solid; 
                border-top-right-radius: inherit; 
            
        </style
    </head
      
    <body style = "text-align:center"
      
        <h1>GeeksforGeeks</h1
        <h3>border-top-right-radius property</h3
          
        <div id="length"
            border-top-right-radius: length; 
        </div><br
  
        <div id="percentage"
            border-top-right-radius: percentage; 
        </div><br
  
        <div id="inherit"
            border-top-right-radius: inherit; 
        </div
    </body
</html>                     

chevron_right


Output:

Supported Browsers: The browser supported by border-top-right-radius property are listed below:

  • Google Chrome 5.0, 4.0-webkit-
  • Internet Explorer 9.0
  • Firefox 4.0, 3.0-moz-
  • Safari 5.0, 3.1-webkit-
  • Opera 10.5


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.