Border-bottom-left-radius Property in CSS3

How to add a rounded border to the bottom left corner of a specified element in CSS3?

By using border-bottom-left-radius property we can add a rounded border to the bottom left corner of a specified element.

<style>
        p {
        border-bottom-left-radius:1em;
        background-color:pink;
        border: 3px solid;
        border-color:black;
        padding:4px 7px 2px 4px;
        }
        div {
        background-color:seashell;
        border: 3px solid;
        border-color:black;
        padding:4px 7px 2px 4px;
        }
</style>

<body>
    <p>
        This is the element with 'border-bottom-left-radius' property.
    </p>

    <div>
        This is the element with out 'border-bottom-left-radius' property.
    </div>
</body>

In the above code snippet we have given border-bottom-left-radius property only to the <p> element. So that in the output we can observe the rounded border at the bottom-left corner of the <p> element.

OUTPUT