CSS3 classic tutorial series: detailed explanation of CSS3 rounded corners (border-radius)

The previous article in the "CSS3 getting started tutorial series" describes CSS3 in detail.RGBAUsage of features. Let's take a look at this article.CSS3Used to achieve the rounded Corner EffectBorder-radiusSpecific usage of attributes.

In the past, we used to apply multiple rounded corner images to each corner as the background. The most widely used method is to add four empty labels to the element labels that require the rounded corner, then, apply the background position of a rounded corner in each empty tag, and then locate the corresponding positions on the labels with the rounded corner. This is very tedious.

Articles you may be interested in

• Recommended articles for Web developers and designers
• 20 brilliant CSS3 feature application demonstrations
• 35 amazing CSS3 animation demos
• 12 beautiful CSS3 button implementation schemes are recommended.
• The Ultimate Collection of 24 practical CSS3 tools

 

Now we haveCSS3After the border-radius feature of, it is very simple to achieve the border rounded corner effect, and it has multiple advantages: one is to reduce the workload of website maintenance; the other is to improve the performance of the website, with fewer HTTP requests for images, the webpage loading speed will become faster. The third is increased visual aesthetics.

SinceBorder-radiusWith so many advantages, we can see how to apply it in terms of its syntax, attributes, and attribute values, and how to create a rounded corner. What else can we create in addition to creating a rounded corner? If there are so many, let's get started:

Basic Syntax:

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

Value range:

<Length>: A length value composed of floating-point numbers and unit identifiers. It cannot be a negative value.

Simple Description:

Border-radius is an abbreviated method. If the values before and after "/" exist, set the horizontal radius for the values before "/", and set the vertical radius for the nominal value after. If there is no "/", the horizontal and vertical radius are equal. In addition, the four values are set in the order of top-left, top-right, bottom-right, and bottom-left. The following situations may occur:

1. If there is only one value, the top-left, top-right, bottom-right, and bottom-left values are equal.

2. If there are two values, top-left is equal to bottom-right, and the first value is used. top-right is equal to bottom-left, and the second value is used.

3. There are three values. The first value is top-left, and the second value is top-right and bottom-left, and they are equal, the third value is set bottom-right.

4. There are four values. The first value is top-left, and the second value is top-right. The third value is bottom-right. The fourth value is bottom-left.

Previously, we mainly looked at the abbreviated format of border-radius. In fact, the border-radius attributes are the same as those of border. You can also split the corners separately, that is, the following four methods, here, I agree that the Y axis is on the X axis first. For details, refer to the following:

Border-top-left-radius: <length> // border-top-right-radius in the upper left corner: <length> // border-bottom-right-radius: <length> // border-bottom-left-radius: <length> // lower left corner

Here we will talk about how to split each angle to a value: the first value in <length> is the horizontal radius of the rounded corner, and the second value is the vertical radius. If the second value is omitted, then it is equal to the first value. In this case, this angle is a 1/4 rounded corner. If any value is 0, this angle is not a rounded corner.

Border-radius is only available in the following versions: Firefox4.0 +, Safari5.0 +, Google Chrome 10.0 +, Opera 10.5 +, and IE9 + support the border-radius standard syntax format. For older browsers, border-radius needs to add different prefixes based on different browser kernels. For example, the Mozilla kernel requires "-moz", and the Webkit kernel requires "-webkit, in order to be compatible with the old browsers of various kernels, let's look at the format of border-radius in Different kernel browsers:

1. Mozilla (Firefox, Flock, and other browsers)

-Moz-border-radius-topleft: // upper left corner-moz-border-radius-topright: // upper right corner-moz-border-radius-bottomright: // bottom right corner-moz-border-radius-bottomleft: // bottom left corner

It is equivalent:

-Moz-border-radius: // abbreviation

2. WebKit (Safari, Chrome, and other browsers)

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

It is equivalent:

-Webkit-border-radius: // abbreviation

3. Opera Browser:

Border-top-left-radius: // border-top-right-radius in the upper left corner: // border-bottom-right-radius in the upper right corner: // bottom-Right border-bottom-left-radius: // bottom-left corner

It is equivalent:

Border-radius: // abbreviation

4. Trident (IE)

Earlier versions of IE9 do not support border-radius, and IE9 does not have a private format and uses border-radius. The write method is the same as that of Opera, which is not repeated here.

To support the border-radius attribute in various kernel browsers of the new or old version, we need to change the border-radius format:

-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} ]?

-Moz and-webkit must be added to the split format. The above code is equivalent to the following code:

-Moz-border-radius-topleft: <length> // upper left corner-moz-border-radius-topright: <length> // upper right corner-moz-border-radius-bottomright: <length> // lower right corner-moz-border-radius-bottomleft: <length> // lower left corner-webkit-border-top-left-radius: <length> // upper left corner-webkit-border-top-right-radius: <length> // the upper right corner-webkit-border-bottom-right-radius: <length> // the lower right corner-webkit-border-bottom-left-radius: <length> // border-top-left-radius in the lower left corner: <length> // border-top-right-radius in the upper left corner: <length> // border-bottom-right-radius: <length> // border-bottom-left-radius: <length> // lower left corner

In addition, border-radius must be placed after-moz-border-radius and-webkit-border-radius. (Note: the instances mentioned in this article only write the standard syntax format. If your version is not the previous version, please update the browser version to display the effect normally, or add the corresponding kernel prefix in front of border-radius. It is best to add a variety of kernel browser prefix in actual applications .)

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

<div class="demo"></div>

To better display the effect, we add a style for this demo:

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

NOTE: If there is no special Declaration, all the basic code formats of the instance in this article are as shown above. Only the border-radius attribute settings are added to this element.

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

As mentioned above, "/" refers to the horizontal radius of the rounded corner, and "/" refers to the vertical radius of the rounded corner, both of them follow the TRBL sequence (top right bottom left. In order to make everyone better understand, we replace the above Code with the following:

.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 look at their results:

　　

3. Supported browsers:

　　

We have introduced the basic usage of border-radius and the format in various browsers. Here we will introduce the specific usage through examples:

1. When border-radius has only one value, the four corners have the same rounded corner settings, and the effects are consistent:

.demo {  border-radius: 10px;}

It is equivalent:

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

Effect:

　　

2. border-radius sets two values. In this case, top-left is equal to bottom-right and they take the first value. top-right is equal to bottom-left and they take the second value, that is to say, the upper left and lower right corner of the element are the same, and the upper right and lower left are the same.

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

It is equivalent:

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

Effect:

　　

3. Set border-radius to three values. In this case, top-left takes the first value. top-right equals to bottom-left and they take the second value, bottom-right:

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

It is equivalent:

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

Effect:

　　

4. Set four values for border-radius. In this case, top-left takes the first value, top-right takes the second value, and bottom-right takes the third value. bottom-left:

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

It is equivalent:

.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 instances, we can see that the border-radius and border values are very similar. border follows the TRBL principle (the left side of the top corresponds to values 1, 2, 3, and 4 respectively ), however, if the value of border-radius is changed to the upper left corner (top-left), the value 1 corresponds to the value 2 in the upper right corner, and the value 3 in the lower right corner (bottom-right, value 4 in the lower left corner (bottom-left.

The above four instances are border-radius applications with the same horizontal and vertical radius. Let's look at several instances with different horizontal and vertical radius values:

1. border-radius: horizontal/vertical: when only one horizontal and one vertical radius is set, the horizontal radius specifies the horizontal radius values of the element with four corners, the vertical radius specifies the vertical radius value of the element. At this time, the four corners have the same effect because they have the same value:

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

It is equivalent:

.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, each angle is not 1/4 circles. As we mentioned earlier, they only have 1/4 circles when the horizontal and vertical radius values are the same, we can change different radius values and make some special image effects. If you are interested, you can try different settings locally.

2. border-radius: horizontal 1 Horizontal 2/Vertical 1 vertical 2: two horizontal values and two vertical values are set, in this case, top-left and bottom-right have the same horizontal and vertical radius, that is, horizontal 1 and vertical 1; top-right and bottom-left have the same horizontal and vertical radius values, that is, horizontal 2 and vertical 2:

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 take a look at the following example:

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

It is equivalent:

.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 two values correspond to each other. Let's look at an instance. There are three values horizontally, and there are only two values vertical:

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

It is equivalent:

.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 know from the above equivalent code that no matter how values they are, the values of "/" are in TRBL order.

The above are some of our common applications. Let's take a look at several special applications:

1. There is also a difference between the inner radius and the outer radius for border-radius. It is mainly because the element's border value is large and the effect is obvious, when the border-radius value is smaller than or equal to the thickness of the border, the border does not have a rounded corner effect, for example, the following example:

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

Effect:

　　

In the preceding example, we change the border-radius value to a greater value than the border value:

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

Effect:

　　

Why is there no internal rounded corner effect when the radius of border-radius is smaller than the thickness of the element border? Here, because our border-radius's internal diameter value is equal to the outer diameter value minus the border thickness value, when their value is negative, the internal diameter is 0 by default, the value of border-radius cannot be negative. It also shows that the center of the internal and external curves of border-radius is not necessarily consistent. Only when the Border thickness is 0 will the center of the curve inside and outside be in the same position.

2. If the two adjacent edges of an angle have different widths, the angle will smooth from the wide side to the narrow side. One side can even be 0. The adjacent corner is changed from large to small.

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

Effect:

　　

3. If two adjacent edges have different colors and line styles, the color of the two adjacent edges and the center of the style transition are in an angle proportional to the width of the two sides. For example, if the width of the two sides is the same, the point is a 45 ° angle. If one side is twice the width of the other side, the point is located at a 30 ° angle. The line defining this transformation is the line connecting the two points on the internal and external curves. Let's look at an example with different four sides in different colors and different widths:

.demo {  border-color: red green blue orange;  border-width: 15px 30px 30px 80px;  border-radius: 50px;}

Effect:

　　

The above are some special usage points. If you want to use border-radius to create more different shapes or applications, click here.

Border-radius can be applied to various elements, but it may be slightly different in img and table applications. First, let's look at the situation when border-radius is applied to images. Currently, only the Firefox4.0 + browser can be used to apply border-radius on img, but images cannot be cut in other browsers. Let's look at an example:

img {  border: 5px solid green;  border-radius: 15px;}

Let's take a look at its effect in various browsers:

　　

The figure on the left shows the effects under Safari5.0, Google Chrome 10.0, and Opera11.1. We can see that there is no rounded corner in the image, and the figure on the right shows the effects under Firefox4.0, this version is the same as the left image version. If you want to reach an agreement, you must discard border-radius and use CSS2 to create rounded corners. In addition, when the style attribute border-collapse of a table is collapse, border-radius cannot be displayed normally. Only border-collapse: separate can be displayed normally.

table {  border-collapse: collapse;  border: 2px solid red;  background: green;  border-radius: 15px;}

Effect:

　　

You can view the table demo here.

At this point, we have finished introducing some border-radius usage. I hope this will help you. If you are interested, you can refer to the content after this site. Next we will introduce the usage of text shadow in CSS3. More Interested friends are expected to explore and learn more about CSS3.

Articles you may be interested in

• CSS3 Tutorials: CSS3 RGBA
• CSS3 Media Queries implement responsive design
• 35 amazing CSS3 animation demos
• 12 beautiful CSS3 button implementation schemes are recommended.
• The Ultimate Collection of 24 practical CSS3 tools

 

Link to this article: CSS3 getting started Tutorial: CSS3 rounded corner (sorted from: W3CPLUS)

Source: Dream sky ◆ focus on Web Front-end development technology ◆ share Web design resources