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

Editor to share with you how to use the border-radius attribute in css, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

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%

}

The above is all the content of the article "how to use the border-radius attribute in css". 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.