How does the CSS implement the display of the button fillet style? (example)

In the Web page design process, the default effect of the General label property is not too beautiful, such as button style, the default state is extremely ordinary without beauty. Then this article will introduce you to the CSS Set button style Fillet button effect of the relevant operation example.

The code is as follows:

<div style= "width:100px;height:50px;background-color:red;border-radius:15px;" >

Or

<input type= "button" value= "style=" border-radius:5px; "/>

Effects such as:

See the above code is not very easy to think of it. In fact, the HTML set rounded Rectangle button style key point, is the CSS Border-radius
Property. As long as you have mastered the essential usage of this attribute, it is easy to set rounded corners for both div and picture or border buttons.

Key points of knowledge: The Border-radius property is a composite property that can specify up to four border-*-RADIUS attributes this property allows you to add rounded borders to elements!

Border-radius:1-4 length|%/1-4 length|%;

The order of four values for each radius is: upper left corner, upper right corner, lower right corner, lower left corner. If you omit the lower-left corner, the upper-right corner is the same. If you omit the lower-right corner, the upper-left corner is the same. If you omit the upper-right corner, the upper-left corner is the same.

Then this article about CSS buttons to set the fillet style of the introduction, to have the necessary friends to help.