How to achieve the display effect of button rounded style with css? (example)

In the process of web design, the default effect of general label attributes is not very beautiful. For example, the button style, the default state is extremely ordinary and has no aesthetic feeling. So this article will introduce to you related operation examples about the rounded button effect of css setting button style.

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;" />

The effect is as follows:

After reading the above code Don't you think it's very simple? In fact, the key to setting the rounded rectangle button style in HTML is the border-radius
attribute in CSS. As long as you master the essential usage of this attribute, you can easily set rounded corners for divs, pictures, or border buttons.

Introduction to key knowledge points: The border-radius attribute is a composite attribute that can specify up to four border -*- radius attributes. This attribute allows you to add a rounded border to an element!

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

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

So this article’s introduction to setting the rounded corner style of CSS buttons will be helpful to friends in need.

The above is the detailed content of How to achieve the display effect of button rounded style with css? (example). For more information, please follow other related articles on the PHP Chinese website!