CSS Property border-bottom-right-radius

The border-bottom-right-radius property is employed to around the bottom right corner of a component.

The property takes in one or 2 values that outline the radii of 1 / 4 conic section that defines the form of the corner of the outer border edge (see the diagram below). the primary worth is that the horizontal radius, the second the vertical radius. If the second worth is omitted it’s traced from the primary. If either length is zero, the corner is sq., not rounded. Percentages for the horizontal radius talk over with the dimension of the border box, whereas percentages for the vertical radius talk over with the peak of the border box. Negative values aren’t allowed.

The curvature of the corner doesn’t got to be absolutely circular. once only 1 worth is specified and also the different is traced from the one that’s specified , the result are a circular curve; i.e, associate arc of a circle is employed as a border.

But once 2 values area unit specified and that they aren’t equal, the result’s associate elliptical curve; i.e, associate arc of associate conic section is employed as a border.

Desktop Browser Support

Mobile Browser Support


border-bottom-right-radius: 50%;
border-bottom-right-radius: 30px;
border-bottom-right-radius: 100px 50px;
border-bottom-right-radius: 20% 30%;  


  1. whoah this blog is wonderful i love reading your articles. Keep up the good work! You know, a lot of people are searching around for this info, you can help them greatly.

Leave a Reply