Border-top-left-radius Property in CSS3

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

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

<style>
        p {
            border-top-left-radius: 10px;
            border-style: solid;
            border-width: 2px;
            background-color: cornsilk;
        }

        div {
            border-style: solid;
            border-width: 2px;
            background-color: lightblue;
        }
</style>

<body>
    <p>This element having border-top-left-radius.</p>
    <div>This element does not have border-top-left-radius.</div>
</body>

In the above codes snippet we have given border-top-left-radius property only to the <p> element. So that the <p> element will have a rounded border at the top left corner.

OUTPUT

Views: 2903 | Post Order: 68

CSS3 > Borders

Border-top-left-radius Property in CSS3

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

Related Posts

Utility Tools