Get the App
SLTechnology News&Howtos  ›  Development  › 

How css sets the border to fillet

Shulou Source: shulou.com Published: 2022-06-03 14:16:16 10月03日 Update

This article mainly explains "css how to set the frame to fillet", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's train of thought slowly in depth, together to study and learn "css how to set the frame to fillet" bar!

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The most common and easiest way for css to set fillet borders is to use the border-radius property.

The CSS fillet only needs to set one property: border-radius (meaning "border radius"). If you provide a value for this property, you can set the radius of four fillets at the same time. All legal CSS measures can be used: em, ex, pt, px, percentage, and so on.

Border-radius can set 1 to 4 values at the same time:

If you set a value of 1, it means that all four fillets use this value.

Div {text-align:center;border:2px solid # a1a1a1 * paddingbackground:pink;width:150px;border-radius:25px;-moz-border-radius:25px; 80px 40px; background:pink;width:150px;border-radius:25px;-moz-border-radius:25px; / * Old Firefox * /} fillet border

Effect picture:

If you set two values, it means that the upper left corner and lower right corner use the first value, and the upper right corner and lower left corner use the second value.

If you set three values, you will use the first value in the upper left corner, the second value in the upper right corner and the lower left corner, and the third value in the lower right corner.

If you set four values, they correspond to the upper left corner, the upper right corner, the lower right corner, and the lower left corner (clockwise).

Border-radius can also set a second set of values with a slash. The first set of values represents the horizontal radius and the second set of values represents the vertical radius. The second set of values can also be set to 1 to 4 values at the same time, and the application rules are the same as the first set of values.

Thank you for your reading, the above is the content of "how css sets the frame to fillet". After the study of this article, I believe you have a deeper understanding of how css sets the frame to fillet, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Tags: Fillet border radius at the same time attributes upper left corner learning three content that is legal same two just meaning commonly used ideas situations effects effect drawings Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Huawei NVidia Shulou Information Apple Docker