Summary

The border-bottom-right-radius CSS property sets the rounding of the bottom-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.

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.

• Initial value : 0
• Applies to: all elements
• Inherited :no
• <percentage> :yes, refer to the corresponding size of the border box
• Media: visual
• Computed value : the dimension of the semi-major and semi-minor axis, that is two absolute <length> values
• Animatable: yes

Syntax

Formal grammar: [ <length> | <percentage> ] [ <length> | <percentage> ]? 

border-bottom-right-radius: radius               /* the corner is a circle    */  E.g. border-bottom-right-radius: 3px
border-bottom-right-radius: horizontal vertical  /* the corner is an ellipsis */  E.g. border-bottom-right-radius: 0.5em 1em

border-bottom-right-radius: inherit

Examples

div {
  border-bottom-right-radius: 40px 40px;
}

div {   
  border-bottom-right-radius: 40px 20px;
}

div {   
  border-bottom-right-radius: 40%;
}

div {   
  border-bottom-right-radius: 40%;
}

div {
  border-bottom-right-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
}

Specifications

Browser compatibility

See also

The border-radius-related CSS properties: the CSS shorthand border-radius , the properties for the other corners: border-top-right-radius , border-top-left-radius , and border-bottom-left-radius .