CSS border-bottom-right-radius Property Tutorial

In this section, we will learn what the border-bottom-right-radius property is and how to use it in CSS.

Click here to run the example of border-bottom-right-radius property.

CSS border-bottom-right-radius Property Definition and Usage

By default, when creating an element, it has sharp corners. But with the help of CSS, we can create other shapes for corners of elements.

For example, the border-bottom-right-radius property is used to change the shape of the bottom right corner of elements.

CSS border-bottom-right-radius Property Syntax

border-bottom-right-radius: length|% [length|%]|initial|inherit;

CSS border-bottom-right-radius Property Value

This property takes two values by default:

  • The first value defines the bottom border radius.
  • The second value defines the right border radius.

Notes:

  • Any relative or absolute units that are supported in CSS can be used as the value of this property.
  • If we only apply one value and omit the second one, browsers automatically copy the first value and use it for the second one as well.
  • By default, both values are set to 0 and as a result, we get a sharp corner for elements.

Example: border-bottom-right-radius property in CSS

See the Pen border-bottom-right-radius property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS border-bottom-right-radius Property Work?

In this example, the value for this property is set to 40px and 70px. This means the bottom border radius is set to 40px and right border radius to 70px.

Facebook
Twitter
Pinterest
LinkedIn

Top Technologies