Samples with jquery, css3 and html5

Tuesday, 21 April 2015

CSS3: Create rounded corners using css only

Once upon a time all the web developers do lot of work to create rounded corners. Sometimes we need to add extra JavaScript files for IE. But now we can able to create rounded corners just using a single property that is available in CSS3.

The border-radius property allows you to add rounded corners to elements.




<!DOCTYPE html>
<html>
<head>
<style> 
#rnd-cornners1 {
            border-radius: 25px;
            background: #EB65A0;
            padding: 20px; 
            width: 200px;
            height: 150px;    
}
#rnd-cornners2 {
            border-radius: 25px;
            border: 2px solid #73C5E1;
            padding: 20px; 
            width: 200px;
            height: 150px;    
}
</style>
</head>
<body>
<p>The border-radius property allows you to add rounded corners to elements.</p>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rnd-cornners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rnd-cornners2">Rounded corners!</p>
</body>
</html>

0 comments:

Post a Comment

Like Us On Facebook

Popular Posts

Powered by Blogger.

Follow by Email

Main Post

Send Quick Massage

Name

Email *

Message *