CSS border-bottom-left-radius

The border-bottom-left-radius property in CSS is used to define the rounding of the bottom-left corner of an element's border. It works in combination with the border-bottom-right-radius, border-top-left-radius, and border-top-right-radius properties to create rounded corners on an element.

The syntax for using border-bottom-left-radius is simple. You just need to specify the radius value in pixels or percentages. Here's how you can use it:


    .rounded {
      border-radius: 10px 0 0 0;
      border:solid 2px white;
      
    }

Result:

This is an example text with rounded bottom-left corner.

In the example above, we have applied a border-bottom-left-radius of 10 pixels to the element with the .rounded class. The value 10px specifies the radius of the bottom-left corner, making it curved rather than sharp.

You can also use percentages for the border-bottom-left-radius property. For example, setting it to 50% will create a half-circle shape in the bottom-left corner of the element.

It's important to note that the border-bottom-left-radius property only affects the bottom-left corner of an element. To round all corners, you should use the border-radius shorthand property.