CSS border-top-right-radius Property

A border-top-right-radius sets the top right corner radius.

This property gives the element a rounded border effect.

Example

#

An element with a border-top-right-radius setting.

50px radius on top right corner
<style>
  .border-rounded {
    border: 3px solid #302ea3;
    padding: 30px;
    border-top-right-radius: 50px;
  }
</style>

<div class="border-rounded">
  50px radius on top right corner
</div>

Using border-top-right-radius

The border-top-right-radius property sets the top right corner radius.

The border-radius gives an element a rounded border effect.

Syntax

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

Values

#

Value Description
length Shape of the top right corner, the default value is 0.
% Shape of the top right corner in percentage
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-top-radius values.

50% radius on top right corner
<style>
  .border-rounded-percentage {
    padding: 30px;
    border: 3px solid #302ea3;
    border-top-right-radius: 50%;
  }
</style>

<div class="border-rounded-percentage">
  50% radius on top right corner
</div>

Browser support

This table shows when border-top-right-radius support started for each browser.

Chrome
5.0 May 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
10.5 Mar 2010
Safari
5.0 Jun 2010

You may also like

Guides