Here i have explained how to give an element "rounded corners" look with CSS.

The border-radius property allows you to add rounded corners to elements. With the CSS3 border-radius property, you can give any element "rounded corners".

Step1: copy the following HTML Markup and paste it inside body tag.

HTML Markup

<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>

Step2: copy the following CSS and paste it inside head tag.

CSS

#rcorners1 {
    border-radius: 25px;
    background: orange;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid orange;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

Screenshot

Add Comments