About rounded corners

Basic syntax:

　　Border-radius:none | <length>{1,4} [/<length>{1,4}]?

Range of values:

<LENGTH>: The length value consisting of floating-point numbers and unit identifiers. cannot be negative.

Brief description:

Border-radius is an abbreviated method. If the value before and after "/" is present, then the value in front of "/" is set to its horizontal radius, and the "/" after face value sets its vertical radius. If there is no "/", the horizontal and vertical radii are equal. In addition, the four values are set according to the order of Top-left, Top-right, Bottom-right, Bottom-left, which will appear mainly in the following situations:

1, there is only one value, then Top-left, Top-right, Bottom-right, bottom-left four values are equal.

2, there are two values, then Top-left equals Bottom-right, and takes the first value; Top-right equals Bottom-left and takes the second value

3, there are three values, where the first value is set Top-left, while the second value is top-right and bottom-left and they are equal, the third value is the set bottom-right.

4, there are four values, where the first value is set Top-left and the second value is top-right the third value bottom-right the fourth value is the set Bottom-left.

In front, we mainly look at the abbreviation format of Border-radius, in fact, Border-radius and border properties, but also can separate the various angles separately, that is, the following four kinds of writing, here I rule, they are the first Y axis in the x-axis, specifically see below:

1 2 3 4

Border-top-left-radius: <length> <length>//Upper left corner Border-top-right-radius: <length> <length>//Upper right corner border-bottom-right-radius:<length> <length>//Lower right corner Border-bottom-left-radius:<length> <length>// lower left corner

Here, the corners are split to take the value way:<length> <length> The first value is the fillet horizontal radius, the second value is the vertical radius, if the second value is omitted, then it is equal to the first value, then this angle is a one-fourth fillet, If either value is 0, then the corner is not rounded.

Border-radius is available only in the following versions of browsers: firefox4.0+, safari5.0+, Google Chrome 10.0+, Opera 10.5+, ie9+ support Border-radius standard syntax format, For older browsers, Border-radius needs to add different prefixes based on different browser kernels than the Mozilla kernel needs to be "-moz", and the Webkit kernel needs to be "-webkit" and so on, so I can be compatible with the older browsers of each major kernel, Let's look at the writing format of Border-radius under different kernel browsers:

1, Mozilla (Firefox, Flock and other browsers)

1 2 3 4

-moz-border-radius-topleft:// upper left corner -moz-border-radius-topright://Upper right corner -moz-border-radius-bottomright:// lower right corner -moz-border-radius-bottomleft:// lower left corner

Equivalent to:

1	-moz-border-radius:// Shorthand

2, WebKit (Safari, Chrome and other browsers)

1 2 3 4

-webkit-border-top-left-radius:// upper left corner -webkit-border-top-right-radius://Upper right corner -webkit-border-bottom-right-radius:// lower right corner -webkit-border-bottom-left-radius:// lower left corner

Equivalent to:

1	-webkit-border-radius:// Shorthand

3. Opera browser:

1 2 3 4

Border-top-left-radius:// upper left corner Border-top-right-radius://Upper right corner Border-bottom-right-radius:// lower right corner Border-bottom-left-radius:// lower left corner

Equivalent to:

1	Border-radius:// Shorthand

4, Trident (IE)

IE9 The following version does not support Border-radius, and IE9 does not have a private format, are used Border-radius, and its writing is the same as Opera, here is not duplicated.

In order to support the Border-radius property for various kernel browsers, whether it be the new version or the old one, we need to change our Border-radius format to the following application:

1 2 3

-moz-border-radius:none | <length>{1,4} [/<length>{1,4}]? -webkit-border-radius:none | <length>{1,4} [/<length>{1,4}]? Border-radius:none | <length>{1,4} [/<length>{1,4}]?

Its split format needs to add-moz and-webkit, the above code is actually equivalent to the following code:

1 2 3 4 5 6 7 8 9 10 11 12

-moz-border-radius-topleft: <length> <length>//Upper left corner -moz-border-radius-topright: <length> <length>//Upper right corner -moz-border-radius-bottomright: <length> <length>//Lower right corner -moz-border-radius-bottomleft: <length> <length>// lower left corner -webkit-border-top-left-radius: <length> <length>//Upper left corner -webkit-border-top-right-radius: <length> <length>//Upper right corner -webkit-border-bottom-right-radius: <length> <length>//Lower right corner -webkit-border-bottom-left-radius: <length> <length>// lower left corner Border-top-left-radius: <length> <length>//Upper left corner Border-top-right-radius: <length> <length>//Upper right corner Border-bottom-right-radius: <length> <length>//Lower right corner Border-bottom-left-radius: <length> <length>// lower left corner

In addition, it is important to note that Border-radius must be placed behind-moz-border-radius and-webkit-border-radius, (specifically: the examples described in this article are written in the standard syntax format, If your version is not a few of the above mentioned versions, if you want to display the effect, please update the browser version, or in front of the Border-radius with the appropriate kernel prefix, in the actual application is best to add a variety of version kernel browser prefix. ）

Let's take a preliminary look at an example of HTML code:

1	<div class= "Demo" ></div>

To better see the effect, let's add a little style to the demo:

1 2 3 4 5 6

. demo { width:150px; height:80px; border:2px solid #f36; Background: #ccc; }

Note: If no special declaration is made, all the basic code formats for this article are as shown above, and only the Border-radius property setting is added on the element.

1 2 3

. demo { border-radius:10px 15px 20px 30px/20px 30px 10px 15px; }

As we mentioned earlier, "/" refers to the horizontal radius of the fillet, and the "/" is the vertical radius of the fillet, both of which follow the order principle of TRBL (upper right and left). In order to make it clearer, let's replace the above code with the following:

1 2 3 4 5 6

. demo { border-top-left-radius:10px 20px; border-top-right-radius:15px 30px; border-bottom-right-radius:20px 10px; border-bottom-left-radius:30px 15px; }

Do not imitate to see their effect:

　　

Third, supported browsers:

　　

Above we introduce the basic usage of Border-radius, and the format under each big browser, we introduce the concrete usage by example:

One: Border-radius only one value, Four Corners have the same fillet setting, the effect is consistent:

1 2 3

. demo { border-radius:10px; }

It is equivalent to:

1 2 3 4 5 6

. demo{ border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; }

Effect:

　　

Two: Border-radius set two values, at this time top-left equals bottom-right and they take the first value, Top-right equals Bottom-left and they take the second value, that is, the upper left and right corner of the element is the same, The upper-right corner and the lower-left corner are the same

1 2 3

. demo { border-radius:10px 20px; }

Equivalent to:

1 2 3 4 5 6

. demo { border-top-left-radius:10px; border-bottom-right-radius:10px; border-top-right-radius:20px; border-bottom-left-radius:20px; }

Effect:

　　

Three: Border-radius set three values, at this time Top-left take the first value, Top-right equals Bottom-left and they take the second value, Bottom-right take the third value:

1 2 3

. demo { border-radius:10px 20px 30px; }

Equivalent to:

1 2 3 4 5 6

. demo { border-top-left-radius:10px; border-top-right-radius:20px; border-bottom-left-radius:20px; border-bottom-right-radius:30px; }

Effect:

　　

Four: Border-radius set four values, at this time Top-left take the first value, Top-right take the second value, Bottom-right take the third value. Bottom-left Take the fourth value:

1 2 3

. demo { border-radius:10px 20px 30px 40px; }

Equivalent to:

1 2 3 4 5 6

. demo { border-top-left-radius:10px; border-top-right-radius:20px; border-bottom-right-radius:30px; border-bottom-left-radius:40px; }

Effect:

　　

From the above four examples we can see that Border-radius and border values are very similar, we border follow the TRBL principle (from the top right bottom to the left of the corresponding 1, 2,3,4 four values), but Border-radius replaced by the upper left corner ( Top-left) on the value 1, the upper right corner (top-right) corresponds to the value 2, the lower right corner (bottom-right) corresponds to the value 3, the lower left corner (bottom-left) corresponds to the value 4.

The above four examples are the border-radius of horizontal and vertical radii, so let's take a look at a couple of different horizontal and vertical radius values:

Border-radius: Horizontal/Vertical: When only one horizontal and one vertical radius is set, the horizontal radius specifies the horizontal radius value of the element's Four corners, the same vertical radius specifies the vertical radius value of the element, at which point the four Corners have the same effect because they have the same value:

1 2 3

. demo { border-radius:10px/20px; }

Equivalent to:

1 2 3 4 5 6

. demo { border-top-left-radius:10px 20px; border-top-right-radius:10px 20px; border-bottom-right-radius:10px 20px; border-bottom-left-radius:10px 20px; }

Effect:

　　

At this time we are not one-fourth round each corner, the front we also said that only the horizontal and vertical radius values at the same time, they have one-fourth circle characteristics, so that we can change the different radius values, make some special graphics effect, interested friends can own in the local try a variety of different settings.

Second, Border-radius: Horizontal 1 Horizontal 2/Vertical 1 Vertical 2: Set two horizontal and two vertical values, at which point we top-left and bottom-right have the same horizontal and vertical radii, which is the horizontal 1 and vertical 1; Top-right and Bottom-left also have the same horizontal and vertical radius values, that is, horizontal 2 and vertical 2, which we split out to be:

1 2 4

Border-top-left-radius: horizontal 1    vertical 1 Border-bottom-right-radius: horizontal 1    vertical 1 Border-top-right-radius: horizontal 2    vertical 2 Border-bottom-left-radius: horizontal 2    vertical 2;

Let's look at the following example:

1 2 3

. demo { border-radius:10px 20px/20px 10px; }<em id= "__mcedel" style= "Font-family:verdana, Arial, Helvetica, Sans-serif; font-size:14px; line-height:1.5; " >　</em>

Equivalent to:

1 2 3 4 5 6

. demo { border-top-left-radius:10px 20px; border-bottom-right-radius:10px 20px; border-top-right-radius:20px 10px; border-bottom-left-radius:20px 10px; }

Effect:

　　

The above two are the corresponding values, we look at an example, the level has three values, and vertical only two values:

1 2 3

. demo { border-radius:10px 20px 30px/50px 60px; }

Equivalent to:

1 2 3 4 5 6

. demo { border-top-left-radius:10px 50px; border-top-right-radius:20px 60px; border-bottom-left-radius:20px 60px; border-bottom-right-radius:30px 50px; }

Effect:

　　

We can tell from the above equivalent code that no matter how they are valued, the "/" values are in TRBL order.

The above are some of our common applications, so let's look at some of the special points of application:

First, for Border-radius there is a difference between the inner radius and the outer radius, it is mainly the element border value is large, the effect is very obvious, when we border-radius radius value is less than or equal to the thickness of border, we do not have rounded corners inside the border, such as the following example:

1 2 3 4

. border-big { border:15px solid Green; border-radius:15px; }

Effect:

　　

Let's go on to the above example and change the Border-radius radius value to a bit larger than the border value:

1 2 3 4

. border-small { border:15px solid Green; border-radius:25px; }

Effect:

　　

Why does the interior have no fillet effect when the radius of the Border-radius is less than the thickness of the element border? I'm here to say, because our Border-radius bore value is equal to the outer diameter value minus the border thickness value, when their value is negative, the inner diameter defaults to 0, the first to say that the value of Border-radius is not negative. It is also indicated that the center of the inner and outer curves of Border-radius is not necessarily consistent. The center of the inner and outer curves will be in the same position only if the border thickness is 0 o'clock.

Second, if the angle of the two adjacent edges have different widths, then the angle will be a wide range of smooth over to narrow edge. One of the sides can even be 0. The adjacent corners are turned from large to small.

1 2 3 4

. demo { border-width:10px 5px 20px 3px; border-radius:30px; }

Effect:

　　

Three, the adjacent two edges color and the line style is not simultaneously, then two adjacent edge color and the Style transformation Center point is in one and the side width proportional angle. For example, the width of the two sides is the same, this point is a 45° angle, if an edge is twice times the other side, then this point is at a 30° angle. The line that defines the transition is the straight line connecting two points on the inner and outer curves. Let's look at an example with a different color and a different width:

1 2 3 4 5

. demo { Border-color:red Green Blue Orange; border-width:15px 30px 30px 80px; border-radius:50px; }

Effect:

　　

These are some of the more special points of use, if you want to make more different shapes by Border-radius, or more applications, you can click here .

Border-radius can be used in a variety of elements, but in the IMG and table applications will be a little different, first of all, look at the picture on the application of Border-radius when the case. Apply Border-radius on IMG Until now only firefox4.0+ browser is normal, and no other browser can cut the picture, let's first look at an example:

1 2 3 4

IMG { border:5px solid Green; border-radius:15px; }

Let's look at how it works under each browser:

　　

On the left is the Safari5.0, Google Chrome 10.0, Opera11.1 under the effect, we can see that the picture does not have rounded corners, the right is the effect under the Firefox4.0, lower than this version and left the same effect, if need to achieve a consistent effect, We must give up Border-radius and use CSS2 to make rounded corners. In addition to the table's style property Border-collapse is collapse, Border-radius can not display normally, only border-collapse:separate;

1 2 3 4 5 6

Table { Border-collapse:collapse; BORDER:2PX solid red; Background:green; border-radius:15px; }

Effect:

　　

About rounded corners