How to use css3 to achieve rounded corners effect (with example code)

In order to conform to the style of the entire page, sometimes it is necessary to transform the square div into different shapes to achieve a unified style. This article will show you how to use css3 to achieve the rounded corner effect, which has certain reference value. , friends in need can refer to it, I hope it will be helpful to you.

Advantages of using css3 to achieve rounded corners

1. Reduce the workload of website maintenance.

2. Improves the performance of the website. Without HTTP requests for images, the web page loading speed will become faster.

3. Increase visual beauty.

The principle of using css3 to achieve the rounded corner effect

We need to use the border-radius attribute in css3, then Today we will take you to learn more about the border-radius attribute.

Border-radius attribute

1. ##Meaning: The abbreviation of border-radius attribute adds a rounded border to the element.

2. Syntax: border-radius: 1-4 length|% / 1-4 length|%;

3. Browser compatibility: IE9, Firefox 4, Chrome, Safari 5 and Opera support the border-radius attribute.

Code to use css3 to achieve rounded corners effect

Example 1: Element circle with specified background color Corner

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    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; 
}

The example effect is as shown in the figure

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}