CSS3 > Animations

Border-Radius in CSS3

How to specify the border corner radius to make it rounded corer in CSS3?


By using Border-Radius property we can specify the border corner radius to make it rounded corer.

<style>
        a.class1 {
            font-size: 50px;
            text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            border: 1px solid #c0c0c0;
            padding: 10px;
        }

            a.class1:hover {
                background-color: #690;
            }
</style>

<body>
    <a href="http://www.dotnetfunda.com" class="class1">DotNetFunda.com</a>
</body>

In the above code snippet, border-radius specifies the radius of the border corner.

Output

If the cursor is On hover, the background color of the hyperlink turns into Green. That is shown clearly in the Demo URL.

 Views: 623 | Post Order: 97



Write for us