Site icon WebArtDeveloper

How To Make Rounded Corners Using CSS3

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.
Exit mobile version