CSS border-top-right-radius Property

Description

The border-top-right-radius property sets the rounding of the top-right corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

Initial value
0
Applies to
All elements
Inherited
No
Media
Visual
Computed value
Two absolute [length] or percentages
Animatable
Yes
CSS Version
CSS3
JavaScript syntax
object.style.borderTopRightRadius

Syntax

border-top-right-radius: [ <length> | <percentage> ]{1,2} 

Values

  • <length>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS <length> data types. Negative values are invalid.
  • <percentage>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axe refer to the width of the box, percentages for the vertical axe refer to the height of the box. Negative values are invalid.

Example

<div class="border">This is an example of the border-top-right-radius property using a red solid border 2px in width and a 10px radius.</div>
.border {
   border: 2px solid red;
   border-top-right-radius: 10px;
   margin: 20px;
   padding: 20px;
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
9124410.55
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤37184114.21.0

Last updated by CSSPortal on: 12th October 2019