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

This article mainly shows you "CSS how to use border-radius properties", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "CSS how to use border-radius properties" this article.

First, we can use the border-radius property to fillet

Fillets for button and div can be created using the border-radius property

For example:

.button _ kadomaru {

Border-radius:20px

}

You can specify a fillet like this.

The value you specify is only the size of the radius of the ellipse in the case of px, and in the% case, it specifies the ratio of the radius of the ellipse to the width and height of the specified box.

Let's take a look at specific code examples.

Fillet button

HTML code

Fillet button

CSS code

.button _ kadomaru {

Background:rgb (92pm 92225)

Color:rgb (225225225)

Border-radius:10px

}

Fillet border when using px to specify a radius

HTML code

Fillet border

CSS code

.div _ kadomaru1 {

Background:rgb (255, 92, 992)

Width:200px

Height:100px

Padding:20px

Border-radius:20px

}

Fillet border when using% to specify radius

HTML code

Specify the fillet at%.

CSS code

.div _ kadomaru2 {

Background:rgb (92, 255, 92)

Width:200px

Height:100px

Padding:20px

Border-radius:40%

}

Finally, the effect displayed in the browser is as follows

Fillet

We can also achieve the shape of round leaves.

Because border-radius has the ability to round corners, you can try to make a leaf shape with rounded corners and completely pointed corners.

Sleek corners are set with 90px.

The sharp corners are set with 3px.

Border-radius:90px3px

Let's look at specific examples.

HTML code

Leaf shape

CSS code

.div _ kadomaru3 {

Background:rgb (92, 255, 92)

Width:200px

Height:100px

Padding:20px

Border-radius:90px3px

}

The above is all the content of the article "how CSS uses border-radius properties". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.