How CSS uses the border-radius property
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!
