The easiest way to make rounded corners of any type in Internet Explorer 6,7,8 without JavaScript

The next project that I have to do requires these very round corners. After talking with the customer and the designer, we came to the conclusion that Internet Explorer 8 needed these same round corners. Which actually led me to realize the simplest and faster way to organize such frames, buttons and other chips on the site. Without the use of pictures and scripts. When implementing this method, I had to face some pitfalls and look for workarounds. What is my implementation method and what have I encountered, read below.

A bit of history

As we all remember and know, the ways to implement round corners in Internet Explorer are pretty much scattered all over the Internet. One popular way is the CSS3PIE JavaScript library. There are also lots of other libraries using JavaScript. There are simple ways to implement in VML with an element v:roundrect. And someone does corners with pictures at all.

Each of the implementation methods brings its own advantages and disadvantages. For example, JavaScript libraries load the browser very noticeably and the site's performance leaves much to be desired, this is especially noticeable in cases where a huge number of elements are placed on the page that require rounding corners. Sometimes JavaScript libraries do not render elements correctly or do not render at all.

The method with pictures reduces the load on the browser and the page usually works smartly, but this method cannot be applied in cases where a huge part of the site contains heterogeneous types of frames, etc. This method is simply automatically discarded to the side and an alternative is searched, for example, to leave frames with right angles or to completely abandon some elements that do not spoil the look of the site.

The method using VML in my opinion is the most optimal. VML is quite old and by many little-studied language for drawing vector graphics, it is the ancestor of developing SVG. Scattered information on it is scattered over the Internet. The specification is poor. And in the future they will completely forget about him. But at the moment, it is with his help that we will realize our round corners.

Training

To display VML in Internet Explorer, you need to do some things, first add a special tag to the page in the section HEAD

This tag tells the browser what type of elements to give to the VML engine, in our case elements with a prefix (namespace) `v`will be processed by the VML engine, the tag is also included in conditional comments so that other browsers do not process this tag that is not needed for them.

Next, you must specify that the elements behave like VML. This makes the CSS property behavior:url(#default#VML). To do this, we will add a style in conditional comments as well:

Styles you can put in a separate stylesheet so as not to clutter up the markup. Actually, this is where the preparation ends, here we made it clear which tags the browser should send to the VML engine.

We describe the formulas

Here we are and we will begin to implement multifunctional border-radiusin VML using formulas. Formulas are some rules that tell the VML engine how to behave under certain conditions. It is they who give us the opportunity to abandon JavaScript in order to increase the speed of rendering vector graphics. I will not describe the functionality of the formulas, how to work with them, how to use them, since we are not learning VML but making round corners. VML formulas are a pretty powerful way to implement what many implement in JavaScript without realizing that it can be done without it.

So, I implemented a certain template for implementing rounded frames using formulas. We will use this template to draw our necessary frames:

A huge template is not it? But this is not scary, because JavaScript usually takes up much more space, the template is placed only once on the page and is used by key vml-radiusspecified in the attribute IDin the tag v:shapetype. We can also place this template in conditional comments somewhere in the HEAD tag.

Draw round corners

Now we can easily draw frames with round corners:

here we drew a simple green square with round corners, the radius of which is 16 pixels. As you noticed the radius of the corners we indicate in the attribute adj="16,16,16,16". Now let's add borders for this square, for example red:

Here we created a group of layers, that is, red borders were placed on the green square and, as you noticed, the attribute adjhas additional parameters indicating the thickness of the border.

Sometimes it is necessary to make the corners not oval, but oval. That is, the vertical angle is one, and the horizontal is different, for example, such a square:

for this, we will slightly adjust the adj parameter:

Add the background:

or fill with a gradient:

Draw a landscape using a gradient:

Parameters

You can read the description of the standard parameters for the elements, for example, from Microsoft, I’ll only describe the parameter adj, the parameter adjhas only eight values ​​separated by commas, the first four of them indicate the radius of the corners, the second four indicate the thickness of the border.

The first four parameters have tricky specifics. If the number is indicated less 10000then the angles will be the same both horizontally and vertically. For example, a record 00320064says that you need to draw an angle of 32 pixels horizontally and 64 pixels vertically. Roughly divisible into two parts 0032/0064. Such a specific implementation method had to be done because the parameteradjcan have a maximum of 8 parameters, the rest are simply ignored. About this you can read the documentation in official sources.

the first four parameters with values ​​below 10000 indicate:
LeftTopXY, RightTopXY, RightBottomXY, LeftBottomXY
with a value of 10000 and higher indicate:
LeftTopX/LeftTopY, RightTopX/RightTopY, RightBottomX/RightBottomY, LeftBottomX/LeftBottomY

The second four indicates the thickness of the borders:
Top, Right, Bottom, Left

As you can see, there is nothing complicated here, the only thing if you do not specify the second four parameters, then the color fill will completely fill the entire frame, if if at least one parameter is specified, then the fill will affect the borders, and the background will be transparent.

Problem parts

The problematic part in this solution is rubber blocks, the essence of the problem is that Microsoft released Internet Explorer 8 by cutting out the possibility of fitting VML elements to HTML blocks in it, in earlier versions of the browser this method works fine:

    test text

That is, for example, IE7 will quite normally customize our box by the parent block. But in IE8 this approach will not work.

What do you ask !? Of course, there is a way to do this in JavaScript, hang an event on the parent block onresizeand resize our box when this block changes. But this will lead to the fact that when you first load the page, we will need to go over all the elements, set the initial sizes, hang the event. This is all dreary and this is JavaScript, and yet we are doing everything not to use JavaScript for these purposes.

To our joy, Microsoft did not completely cut us off in this opportunity and left one VML element positioning from the parent HTML block. Although this element is not very convenient, it makes it possible to get out of a problem situation. This item is called V:VMLFRAME. This is something like IFRAME but for a vector.

VMLFRAME or another crutch

To use this tag, you need to move our formula to a separate file, create our square there. That is the rule for him, and then use it. And so, let's start, create a file with the name let's say internalvml.vmlwith the contents:

We put our box in the file:

Adding it IDwith a name my-roundso that later on that name IE determines which box we want to use.

And now you can safely make our block with our square through the element v:vmlframe:

    test text

Now Internet Explorer 8 will normally fit our box to the size of the parent block.

Conclusion

In conclusion, I want to say that if something is not clear to you or just want to add something, write in the comments and I will supplement / correct the article. I’m not an expert at writing articles, it’s mine to code, but writing articles is not very good for me. Therefore, do not blame me, I tried)))

Good luck to everyone and a nice rounding!