Border-radius Property in CSS3

How to add rounded borders to a specified element in CSS3?

By using border-radius property we can add rounded borders to a specified element.

<style>
        p {
            border-radius:30px;
            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 radius.</p>
    <div>This element does not have border radius.</div>
</body>

In the above code snippet we have given border-radius property only to the <p> element. The border-radius property with value "30px" gives the 30 pixel rounded borders to the <p> element.

OUTPUT

Views: 3360 | Post Order: 61

CSS3 > Borders

Border-radius Property in CSS3

How to add rounded borders to a specified element in CSS3?

Related Posts

Utility Tools