How to use CSS to achieve rounded border effects

This article mainly introduces how to use CSS to achieve rounded border effect, has a certain reference value, now share to everyone, have the need for friends can refer to

First, the advantages of CSS3 fillet

For a traditional fillet generation scenario, you must use multiple pictures as background patterns. The advent of CSS3 makes it unnecessary to waste time making these images, and there are several other advantages:

* Reduce the amount of maintenance. Image file generation, updating, writing Web page code, these jobs are no longer needed.

* Improve Web page performance. The loading speed of the Web page will be faster because there is no need to make additional HTTP requests.

* Increased visual reliability. In some cases (network congestion, server error, slow speed, and so on), the background image will fail to download, resulting in poor visual performance. This is not the case with CSS3.

Second, Border-radius properties

CSS3 fillet Simply set a property: Border-radius (meaning "border radius"). If you provide a value for this property, you can set the radius of the four rounded corners at the same time. All valid CSS metrics can be used: EM, ex, PT, PX, percent, and so on.

For example, here is a div box:

Now set it to a fillet radius of 15px:

border-radius:15px;

This statement sets both the horizontal radius (horizontal radius) and the vertical radius (vertical radius) of each fillet to 15px.

Border-radius can set 1 to 4 values at a time. If you set a value of 1, this value is used to represent 4 rounded corners. If you set a value of two, the upper-left and lower-right corners use the first value, the upper-right corner and the lower-left corner use the second value. If you set a value of three, the upper-left corner uses the first value, the second value is used in the upper-right corner and the lower-left corner, and the third value is used in the lower-right corner. If you set four values, the upper-left corner, the upper-right corner, the lower-right corner, and the lower-left corner (clockwise order) are followed.

border-radius:15px 5px;

border-radius:15px 5px 25px;

border-radius:15px 5px 25px 0px;

(The lower-left corner has a radius of 0, which becomes a right angle.) ）

Border-radius can also set a second set of values with a slash. At this point, 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 from 1 to 4 values, applying the same rule as the first set of values.

border-radius:15px 5px/3px;

border-radius:15px 5px 25px/3px 5px;

border-radius:15px 5px 25px 5px/3px 5px 10px 15px;

Iii. setting of single rounded corners

In addition to setting four fillets at the same time, you can set each corner individually. For Four Corners, the CSS3 provides four separate properties:

* Border-top-left-radius
* Border-top-right-radius
* Border-bottom-right-radius
* Border-bottom-left-radius

Each of these four properties can set 1 to 2 values at the same time. If you set a value of 1, the horizontal radius is equal to the vertical radius. If you set 2 values, the first value represents a horizontal radius, and the second value represents the vertical radius.

border-top-left-radius:15px;

border-top-left-radius:15px 5px;

Iv. Browser Support

IE 9, Opera 10.5, Safari 5, Chrome 4 and Firefox 4 support the Border-radius attribute above. Earlier versions of Safari and Chrome supported the-webkit-border-radius property, and earlier versions of Firefox supported-moz-border-radius properties.

At the moment, to ensure compatibility, you only need to set-moz-border-radius and Border-radius at the same time.

-moz-border-radius:15px; border-radius:15px;

(Note: Border-radius must be placed in the final statement, otherwise it may be invalidated.) ）

In addition, earlier versions of Firefox had a single fillet statement that was slightly different from the standard syntax.

*-moz-border-radius-topleft (Standard syntax: Border-top-left-radius)
*-moz-border-radius-topright (Standard syntax: Border-top-right-radius)
*-moz-border-radius-bottomleft (Standard syntax: Border-bottom-left-radius)
*-moz-border-radius-bottomright (Standard syntax: Border-bottom-right-radius)

Five, matters needing attention

Although the major browsers support Border-radius, in some details, the implementation is different. When the four corners of the color, width, style (solid wireframe, dashed box, etc.), units are all the same, all browsers render the results are basically the same, once the four corners of the settings are not the same, there will be a big difference. For example, the following code in different browsers, rendering results vary greatly.

Border-color:black;　　Border-style:solid dashed;　　border-width:1px 2px 3px;　　border-top-color:red; border-radius:5%;

Also, not all browsers support setting the fillet radius to a percentage value.

Therefore, the safest way to do this is to set the style and width of each rounded border to the same value, and avoid using percent values.

These are the CSS3.

The following is the code for the traditional CSS rounded border: