Border-top-right-radius Property in CSS3

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

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

<style>
        p {
            border-top-right-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-right-radius.</p>
    <div>This element does not have border-top-right-radius.</div>
</body>

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

OUTPUT

Views: 3194 | Post Order: 69

CSS3 > Borders

Border-top-right-radius Property in CSS3

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

Related Posts

Utility Tools