Border radius crossbrowser. Solution selection

Description

Sets the radius for rounding the corners of the frame. If the frame is not set, then rounding also occurs with the background.

Syntax

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

Values

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

In the case of setting two parameters through a slash, the first sets the radius horizontally, and the second vertically (elliptical corners). On fig. 1 shows the difference between a regular rounded corner and an elliptical corner.

Rice. 1. Corner radius to create different types corners

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

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

Rice. 2. Rounding radii in the Safari browser

Browsers

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

Firefox prior to version 4.0 uses the non-standard property -moz-border-radius .

Description

Sets the radius for rounding the corners of the frame. If the frame is not set, then rounding also occurs with the background.

Syntax

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

Values

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

In the case of setting two parameters through a slash, the first sets the radius horizontally, and the second vertically (elliptical corners). On fig. 1 shows the difference between a regular rounded corner and an elliptical corner.

Rice. 1. Rounding 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. Rounding radii in the Safari browser

Browsers

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

Firefox prior to version 4.0 uses the non-standard property -moz-border-radius .

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 today I will try to write here all sorts of useful and interesting things once a week or two.

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

So, the property works everywhere, except for the donkey up to version 9 (who would be surprised - ed. note). For adequate browsers, the property is written differently:

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

Round 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

Corner rounding -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;

Rounding corners border-radius

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 only work 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 let's move on to examples 3, 9 and 15. In webkit browsers, you can’t set the rounding of diagonally opposite corners with one property, so using this trick for other browsers, use separate corner rounding entries for webkit, as in example 8. Oh, and don’t forget that normal border-radius entries are read in webkit ( not sure if all web kits), so if anything, the flaw can be corrected by them.

Examples 4, 10, 16. There are problems again in Webkit, because it does not show what is really needed. For web kits, 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. It seems to lead to the same thing, but I read somewhere that the slash in the parameter record is used only in Mozilla, and for webkit browsers through a space. But it seems to me that it was a misunderstanding, and therefore you can use it 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 recording matters! Let's consider 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’s clear that the property that is written next, 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 smoothing in webkit browsers is angular, either because of some 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 the following problem arises: if we round the block, the picture lying in it is not rounded. To avoid this problem, you can try: a) duplicating the border-radius for the image as well, but personally for me it did not lead to the desired result in Opera (everything is ok in other browsers); b) set a picture for the block as a background, then everything is rounded off without questions; c) if the rounding of the picture is completely out of topic, then you need to set padding for the block and not worry that something is bumping into something. Based on the above: if you need rounding for an image, then it's easier to set an image for some block and then round the block - this way you will avoid non-cross-browser compatibility.

And now everything! Supported browsers: Opera (10.50 and up), Firefox (1.0 and up), Safari (3.0 and up) and Chrome (all versions). On my own, I’ll add that with complex rounding of corners, this option with a hack for a donkey is much more practical than any analogues on javascript libraries, because. work much faster.

PySy. And finally, catch a 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. A cross-browser solution without the use of JS crutches does not yet exist. With the release of IE9, the headaches will be less, but if you're still in the heat of coding under IE6/7, this won't be a lifesaver for you. But even if IE6/7 falls 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 sit on javascript steroids for a long time to come.

A lot of articles have been written on the topic of rounded shapes, but all of them (those that I could find) are silent about the intricacies and nuances of applying fixes to 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 with border-radius when new versions of browsers are released.

First, 4th firefox version no longer needs its own -moz-border-radius parameter. IE9, as I said, also implements support for border-radius, in any case, it is already present in the RC version. Everything has been great in Opera since version 10.5.

Now solutions for those whom God has shortchanged.

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 consider 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 33 kb, this is definitely a significant advantage. But that's where the positives end, at least for me.

There are a lot of cons. For example, the following 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 can not remove the frame from one side. That is, the border-top parameter will beat the frame of the entire block in general, although the corners will remain rounded. It's funny, but the border-bottom parameter will leave the frame in place, but will not give any effect, that is, the border will remain around the entire block.

Secondly, if you need to trim only two corners, as in the example, then you will be disappointed. Curved-corner can't do that. It can only round all the corners of a block and by an equal radius value. Corners with different rounding radii cannot be achieved. The correct and working version 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 their background.

Well, the last unpleasant moment is the speed of work. The corners don't round right away. It takes about a second from the moment the page is loaded until the corners take the desired shape. Visually, the delay is very noticeable and catches the eye well.

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

Summarizing, we can say that this fix is ​​suitable only for very simple tasks. Although, as practice shows, such simple tasks are rare.

CSS3 PIE

It weighs a lot, you will not say anything. The PIE 1.0 beta 4 version takes 33 kb, both in the .htc implementation and in the js counterpart. But at the same time, CSS3 PIE does not have all the border-radius problems that Curved-corner has. I am also very impressed with the ability to use a JS implementation that 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.

Well, the great thing is that CSS3 PIE fixes the problem not only with border-radius, but also adds a significant amount of CSS3 properties to Microsoft's crooked browsers. So, for example, border-image and box-shadow, properties of working with gradients, will work. The problem of png transparency is solved and much more. All this famously compensates and explains the size of CSS3 PIE.

More fly in the ointment

Alas, neither CSS3 PIE nor Curved-corner can plug all the gaps. 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 positioned absolutely. Alas, I can’t give a detailed description of the situation, since it was not possible to repeat the conditions under which problems arose, but I remember that there were definitely problems.

There is another snag that I know of. To apply a border-radius to an element when hovering over it, like so:

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 should be 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)

Results

For me personally, the absolute favorite is CSS3 PIE. He really gets the job done and does it well. In addition, the library is developing. This development is accompanied by a regular release of new versions, which is very encouraging.

One of the most anticipated CSS3 properties is undoubtedly the . Using the property, you can create such recently popular rectangles with rounded corners, exclusively using CSS without using any images.

Crossbrowser compatibility.

Unfortunately, CSS3 is not yet supported by all browsers. The property is supported by Firefox (since version 3.0), Safari (since version 3.1) and Chrome (since the very first version), but it is not supported Internet Explorer and Opera (to be implemented in Opera 10).

Since CSS3 is not yet a standard, you must prefix the property for it to work in browsers that support it. If you want it to work in Firefox, you need to write in styles , for Safari/Chrome this property will look like this - -webkit-border-radius.

Keep in mind that while Firefox, Safari, and Chrome all support this property, they implement it in slightly different ways. I'll first show you how it's implemented by Firefox and then explain the differences between Safari and Chrome.

First, let's create a simple block, for which we will apply the property

>