Using the CSS3 border-radius attribute, you can “round” any element. CSS3 fillet maker

Using the CSS3 border-radius attribute, you can “round” any element.

attribute describe
border-radius All four corners border-–– Abbreviation of the RADIUS attribute
border-top-left-radius It defines the radian in the upper left corner
border-top-right-radius It defines the radians in the upper right corner
border-bottom-right-radius Defines the radians in the lower right hand corner
border-bottom-left-radius Defines the radian in the lower left hand 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;
}
Copy the code

CSS3 border-radius – Specifies each rounded corner

If you specify only one value in the border-radius attribute, four rounded corners will be generated.

However, if you want to specify each of the four corners, you can use the following rule:

  • Four values: the first value is the upper left corner, the second value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.
  • Three values: the first value is the upper-left corner, the second value is the upper-right and lower-left corner, and the third value is the lower-right corner
  • Two values: the first value is upper left and lower right, and the second value is upper right and lower left
  • One value: All corners have the same value