In CSS, let's set its height, width, and background color:

#box (
width: 590px;
height: 100px;
background-color: # 6B86A6; )

Add the border-radius property:

The border-radius property is declared similar to the margin and padding properties. You can use a shorthand notation of this property for all four corners of the rectangle, or separately for each corner. In short, one value is indicated for each angle:

#box (
-moz-border-radius: 20px;
}

Now all four corners will have a radius of 20px:

You can also specify two values, the first of which will determine the radius for the top-left and bottom-right corners, and the second for the top-right and bottom-left:

#box (
-moz-border-radius: 20px 40px;
}

If you specify three or four values, they will be applied in the following order - upper-left corner, upper-right corner, lower-right corner, and lower-left corner.

#box (
-moz-border-radius: 10px 20px 30px 40px;
}

Declaring a property border-radius for each corner

If you want to use this property for only one corner, then just add the appropriate ending to the property:

• -moz-border-radius-topleft for the upper left corner;
• -moz-border-radius-topright for the upper right corner;
• -moz-border-radius-bottomright for the lower right corner;
• -moz-border-radius-bottomleft for the bottom left corner;

Horizontal and vertical radius

#box (
-moz-border-radius-topleft: 30px 15px;
}

As you can see in the picture, the upper left corner has a slightly "beveled" look. This is because these two values ​​define the horizontal and vertical radius, respectively. When a single value is used, the browser interprets it for both horizontal and vertical radius.

Shorthand for this property, the values ​​for the horizontal and vertical radius are separated by a slash:

#box (
-moz-border-radius: 30px / 15px;
}

#box (
-moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}

Using Safari and Chrome property.

Safari and Chrome use a slightly different syntax, the main difference being the use of the prefix -webkit, instead of -moz:

• -webkit-border-top-left-radius for the upper left corner;
• -webkit-border-top-right-radius for the upper right corner;
• -webkit-border-bottom-right-radius for the lower right corner;
• -webkit-border-bottom-left-radius for the bottom left corner;

When using a short notation, it must be borne in mind that it can be used only when the values ​​for all angles are equal, if the values ​​are different, then it is necessary to specify the properties for each angle.

This code will not work in Safari and Chrome:

#box (
-webkit-border-radius: 10px 20px 30px 40px;
}

The correct code would look like this.

Description

Sets the radius of the rounding of the corners of the frame. If no frame is specified, the background is also rounded.

Syntax

border-radius:<радиус>{1,4} [ / <радиус>{1,4}]

The values

It is allowed to use one, two, three or four values, listing them separated by a space (Table 1). It is also permissible to write two values ​​separated by a slash (/). The values ​​are numbers in any format valid for CSS. In the case of using percentages, the count is relative to the block width.

In the case of specifying two parameters through a slash, the first one specifies the horizontal radius, and the second vertically (elliptical corners). In fig. 1 shows the difference between a regular rounded corner and an elliptical corner.

Rice. 1. Fillet radius for creating different types of corners

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

The result of this example is shown in Fig. 2.

Rice. 2. Fillet radii in the Safari browser

Browsers

Chrome prior to 4.0, Safari prior to 5.0, iOS use the non-standard -webkit-border-radius property.

Firefox before 4.0 uses the non-standard -moz-border-radius property.

I've been trying to write an article for a blog for a month now, but I still can't find the time. But from now on I will try to write here all sorts of useful and interesting things once a week or two.

Today I want to take a look at another CSS3 property, namely border-radius. This property does nothing more than rounding the corners of the blocks. Comfortable? Still would! Although, of course, everyone has already learned how to make png-shny byte corners, and do everything with the help of them, but nevertheless this method is even easier.

So, the property works everywhere, with the exception of a donkey up to version 9 (who would be surprised - ed.). For adequate browsers, the property is written differently:

First of all, let's look at six examples for each option for recording this property and you will see that there are some differences related not only to the description. I tested everything in more or less modern browsers: Firefox 3.6.3, Chrome 7.0, Opera 10.53. The screenshots were made in the specified browsers in the appropriate order.

Rounding corners -moz-border-radius

Example 1

Moz-border-radius: 20px;

Example 2

Moz-border-radius-topright: 20px;
-moz-border-radius-topleft: 20px;

Example 3

Moz-border-radius: 20px 0;

Example 4

Example 5

Moz-border-radius-topright: 20px 8px;
-moz-border-radius-bottomright: 20px 8px;

Example 6

Moz-border-radius: 20px / 8px;

Rounding corners -webkit-border-radius

Example 7

Webkit-border-radius: 20px;

Example 8

Webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;

Example 9

Webkit-border-radius: 20px 0;

Example 10

Example 11

Webkit-border-top-right-radius: 20px 8px;
-webkit-border-bottom-right-radius: 20px 8px;

Example 12

Webkit-border-radius: 20px / 8px;

Border-radius corners

Example 13

border-radius: 20px;

Example 14

border-top-right-radius: 20px;
border-top-left-radius: 20px;

Example 15

border-radius: 20px 0;

Example 16

border-radius: 20px 8px;

Example 17

border-top-right-radius: 20px 8px;
border-bottom-right-radius: 20px 8px;

Example 18

border-radius: 20px / 8px;

So let's start in order. Examples 1-6 work only in Mozilla, examples 7-12 only in webkit browsers (chrome, safari), and 13-18 work in both opera and chrome (and probably all modern webkit browsers).

Examples 1,7,13, 2,8,14 and 5, 11, 17 are not considered, since they lead to the same thing and go to examples 3, 9 and 15... In webkit browsers, it is impossible to set the rounding of diagonally opposite corners by one property, so using this trick for other browsers, use separate entries for rounding corners for the webkit, as in example 8. Yes, and do not forget that ordinary border-radius entries are read in the webkit ( not sure if all the web kits), so if anything, the defect can be corrected by them.

Examples 4, 10, 16... There are problems in the Webkit again, tk. he shows not what is really needed. For webkits, there is only one way out, as in examples 3,9,15 - to use rounding as in example 8 and write the usual border-radius.

Examples 6, 12, 18... They seem to lead to the same thing, but I read somewhere that the slash in the parameter record is used only in the Mozilla, and for webkit browsers through a space. But it seems to me that it was a misunderstanding, and therefore can be used everywhere.

So, we have properties for three types of browsers, and in order for the corners to be rounded everywhere, we need to write three different entries for the desired block. However, from the above, I want to note that the order of the entries matters! Let's look at two examples.

Example 19 (correct)
-webkit-border-radius: 20px 8px;
-moz-border-radius: 20px 8px;
border-radius: 20px 8px;

Example 20 (wrong)
border-radius: 20px 8px;
-moz-border-radius: 20px 8px;
-webkit-border-radius: 20px 8px;

I think it is clear that the next recorded property, if it is relevant for the browser, overwrites the previous one, which causes a small bummer in webkit browsers. I think further it is possible without comments, because in some examples everything is shown =).

Crossbrowser border-radius

For Operas earlier than version 10.50 (it was in it that border-radius support was added) and for the donkey there is a means of understanding this property ()! It is used simply:

Boxxx (
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url (border-radius.htc);
}

Everything, you can enjoy life! Or not?! There are a couple of nuances.
1) When specifying a block border (border), corner antialiasing in webkit browsers is angular, either because of kotsy anti-aliasing, or because of its absence. But with a low-contrast border, it is not particularly visible, so this is a trifle.
2) But if there is an image in the block, then a problem of the following nature arises: if we round a block, the picture in it is not rounded... To avoid this problem, you can try: a) duplication of border-radius for the picture as well, but personally for me it did not lead to the desired result in Opera (in other browsers, everything is okay); b) set a picture for the block as a background, then everything is rounded off without question; c) if the rounding of the picture is not at all in the subject, then you need to set padding for the block and not worry that something is running into something. Based on the above: if you need a rounding for a picture, then it is easier to set a picture for a block and then round off the block - this way you will avoid non-cross-browser compatibility.

And now that's it! Supported browsers: Opera (10.50 and up), Firefox (1.0 and up), Safari (3.0 and up) and Chrome (all versions). From myself I will add that with complex rounding of corners, this option with a hack for a donkey is much more practical than any analogs on toad script-biblotecs, tk. work much faster.

PySy. And finally, catch the hint picture, so as not to forget where what properties are and what they lead to =). The picture is clickable

Part 3.border-radius - rounded corners. Application and cross-browser compatibility

I think everyone knows that making rounded corners on blocks is a big problem. There is no cross-browser solution without using JS crutches yet. With the release of IE9, the headache will be less, but if you are still simmering coding for IE6 / 7, this will not be a salvation for you. But even if IE6 / 7 sinks into oblivion, it will still be a long time before we forget about the 8th version of this browser, which also does not support the border-radius parameter. In other words, our sites will be sitting on javascript steroids for a long time.

A lot of articles have been written on the topic of rounded shapes, but all of them (the ones that I could find) are silent about the intricacies and nuances of using fixes for an existing problem. I will try to list all the difficulties that I had to face when using popular solutions.

To begin with, I will say a few words about how the situation is changing with border-radius when new versions of browsers are released.

First, the 4th version of FireFox no longer needs its own -moz-border-radius parameter. IE9, as I said, also implements border-radius support, at least in the RС version it is already present. Everything is great in Opera since version 10.5.

Now solutions are for those whom God has deprived.

And so, there are two most famous and used methods make border-radius cross browser... The first one is Curved-corner, which uses VML and behavior... The second is CSS3 PIE, which has two implementations. One is also based on VML and behavior, the second is a JavaScript library.

Let's look at both solutions.

Curved-corner

Of the pluses, I found only one - the small weight of the included border-radius.htc file. The current version of the implementation takes only 5kb. Against PIE, which weighs 33kb, this is definitely a significant advantage. But this is where the pros end, at least for me.

There are a lot of cons. For example, such a construction will not work:

#selector (border: # c6c5c2 1px solid; border-top: none; border-radius: 0 0 6px 6px; background: # f0ecdf; behavior: url (border-radius.htc);)

First, you cannot remove the frame from one side. That is, the border-top parameter will nail the border of the entire block, although the corners will remain rounded. It's funny, but the border-bottom parameter will leave the border in place, but it won't give any effect, that is, the border will remain around the entire block.

Secondly, if you only need to cut two corners, as in the example, then you will be disappointed. Curved-corner does not know how. It can only round all corners of a block and by an equal radius value. Corners with different radii cannot be achieved. The correct and working version only looks like this:

#selector (border: # c6c5c2 1px solid; border-radius: 6px; behavior: url (border-radius.htc);)

Thirdly, Curved-corner does not work for blocks that have an image as the background.

Well, the last unpleasant moment is the speed of work. The corners take a long time to round. It takes about a second from the moment the page loads until the corners take the desired shape. Visually, the delay is very noticeable and conspicuous.

There were some other problems (read the nuances), but I can't remember now.

In summary, we can say that this fix is ​​only suitable for very simple tasks. Although, as practice shows, such simple tasks rarely come across.

CSS3 PIE

Weighs a lot, you will not say anything. The PIE 1.0 beta 4 version is 33 kb, both in the .htc implementation and in the js analogue. But at the same time, CSS3 PIE is devoid of all those border-radius problems that Curved-corner has. Also, I am greatly impressed by the ability to use JS implementation, which does not require additional code in CSS and can cling to any selector (when using jQuery, for example).

CSS3 PIE also has a delay in rendering (sometimes not), but much less than in the case of Curved-corner. It is almost invisible, which makes the library very attractive and usable.

And the best part is that CSS3 PIE fixes the problem not only with border-radius but also adds a significant number of CSS3 properties to the curves of Microsoft browsers. This is how border-image and box-shadow, gradient properties, will work, for example. The problem of png transparency is solved and much more. All this famously compensates for and explains the CSS3 PIE size.

More tar

Alas, neither CSS3 PIE nor Curved-corner can plug all the cracks. So, for example, you will not get round corners for those elements that are initially hidden - they have the display: none parameter. Likewise with the visible parameter and its hidden value. Problems can arise if the element is absolutely positioned. Alas, I cannot give a detailed description of the situation, since it was not possible to repeat the conditions under which the problems arose, but I remember that there were definitely problems.

There is another snag I know. To apply border-radius to an element when you hover over it with the mouse cursor, like this:

A: hover (background: #ccc; color: # 000; border: #ccc 1px solid; border-radius: 6px)

It is necessary that this element has rounded corners initially, otherwise there will be no effect. That is, in this example, there must be a selector A, which will also have border-radius and border set:

A (background: #fff; color: # 000; border: #fff 1px solid; border-radius: 6px) a: hover (background: #ccc; color: # 000; border: #ccc 1px solid; border-radius: 6px)

Outcomes

For me personally, CSS3 PIE is the absolute favorite. Really copes with its task and does it with dignity. In addition, the library is developing. This development is accompanied by the regular release of new versions, which is very encouraging.

Description

Sets the radius of the rounding of the corners of the frame. If no frame is specified, the background is also rounded.

Syntax

border-radius:<радиус>{1,4} [ / <радиус>{1,4}]

The values

It is allowed to use one, two, three or four values, listing them separated by a space (Table 1). It is also permissible to write two values ​​separated by a slash (/). The values ​​are numbers in any format valid for CSS. In the case of using percentages, the count is relative to the block width.

In the case of specifying two parameters through a slash, the first one specifies the horizontal radius, and the second vertically (elliptical corners). In fig. 1 shows the difference between a regular rounded corner and an elliptical corner.

Rice. 1. Fillet radius for creating different types of corners

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

The result of this example is shown in Fig. 2.

Rice. 2. Fillet radii in the Safari browser

Browsers

Chrome prior to 4.0, Safari prior to 5.0, iOS use the non-standard -webkit-border-radius property.

Firefox before 4.0 uses the non-standard -moz-border-radius property.