With the CSS3 using border-radius property, you can give any element “rounded corners”
CSS3 border-radius Property Details
Some Examples of border-radius property:
1. Rounded corners for an element with a specified background color:
#corners_backgroung {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
2. Rounded corners for an element with a border:
#corners_border {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
3. Rounded corners for an element with a background image:
#corners_bg_image {
border-radius: 25px;
background: url(image.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Note: The
border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.
