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.



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.






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



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.