Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to set four rounded corners in css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

CSS3 fillets are used to add special color corners to the body or text by using the border-radius property. The simple syntax for fillets is as follows:

# rcorners7 {

Border-radius:60px/15px

Background:#FF0000

Padding:20px

Width:200px

Height:150px;}

For example, this property can have three values. The following example uses two values:

# rcorners1 {

Border-radius:25px

Background:#8AC007

Padding:20px

Width:200px

Height:150px

}

# rcorners2 {

Border-radius:25px

Border:2pxsolid#8AC007

Padding:20px

Width:200px

Height:150px

}

# rcorners3 {

Border-radius:25px

Background:url (/ css/images/logo.png)

Background-position:lefttop

Background-repeat:repeat

Padding:20px

Width:200px

Height:150px

}

Roundedcorners!

Roundedcorners!

Roundedcorners!

The effect is as follows:

Wechat screenshot _ 20181108143337.png

Each corner attribute:

We can specify each corner attribute, as shown in the following example:

# rcorners1 {

Border-radius:15px50px30px5px

Background:#a44170

Padding:20px

Width:100px

Height:100px

}

# rcorners2 {

Border-radius:15px50px30px

Background:#a44170

Padding:20px

Width:100px

Height:100px

}

# rcorners3 {

Border-radius:15px50px

Background:#a44170

Padding:20px

Width:100px

Height:100px

}

This is the end of the article on "how to set four rounded corners in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.