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

Another project that I have to do requires these most round corners. After talking with the customer and the designer came to the conclusion that in Internet Explorer 8 you need these round corners. What actually led me to realize the simplest and faster way to organize such frames, buttons and other features 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 did I encounter, read below.

A bit of history

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

Each of the methods of implementation 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 requiring rounding corners are placed on the page. Sometimes JavaScript libraries do not correctly draw elements or do not draw at all.

The method with pictures reduces the load on the browser and the page usually works smartly, but this method cannot pretend in cases where a large part of the site contains heterogeneous types of frames, etc. This method is simply automatically dropped to the side and an alternative is searched, for example, to leave frames with right angles or to completely abandon parts that do not spoil the look of the site.
')
The method with the use of VML in my opinion the most optimal. VML is quite an old and little-studied language for drawing vector graphics, it is the ancestor of developing SVG. The Internet scattered information on it scraps. The specification leaves much to be desired. And in the future they will 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 actions, first of all add a special tag to the page in the HEAD section

 <!--[if VML&(lt IE 9)]> <?import namespace="v" urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace ?> <![endif]--> 

This tag tells the browser about what type of elements should be given to the VML engine, in our case the elements having the prefix (namespace) `v` will be processed by the VML engine, the same tag is added to the conditional comments, so that other browsers would not process this unnecessary for them tag.

Next you need to 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 the same conditional comments:

 <!--[if VML&(lt IE 9)]> <style type="text/css"> v\:shape, v\:shapetype, v\:formulas, v\:group, v\:f, v\:path, v\:fill { behavior:url(#default#VML); } v\:group, v\:shape { display:inline-block; left: 0px; top: 0px; width: 100%; height: 100%; } </style> <![endif]--> 

Styles you can put in a separate style file, so as not to litter the markup. Actually this is the end of the training, here we have made it clear which tags the browser should send to the VML engine.

Describe formulas

This is where we will begin to implement the multifunctional border-radius on VML using formulas. Formulas are certain rules that indicate to the VML engine how to behave in certain conditions. It is they who give us the opportunity to abandon JavaScript in order to increase the speed of drawing vector graphics. I will not describe the functional formulas, how to work with them, how to use, since you and I do not study VML but make 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 pattern of implementation of rounded frames using formulas. You and I will use this template to draw our desired frames:

 <v:shapetype id="vml-radius" adj="0,0,0,0" coordorigin="-1 -1" coordsize="1000000 1000000" path="m,@9qy@8,l@15,qx@0,@16l@0,@24qy@22,@1l@29,@1qx,@31l,@9xm@44,@54qy@49,@36 l@60,@36qx@39,@65l@39,@77qy@71,@42l@82,@42qx@44,@88l@44,@54xe" stroked="false"> <v:formulas> <v:f eqn="val width"/><v:f eqn="val height"/><v:f eqn="prod @0 1 pixelwidth"/> <v:f eqn="prod @1 1 pixelheight"/><v:f eqn="prod #0 1 10000"/><v:f eqn="prod @4 10000 1"/> <v:f eqn="sum #0 0 @5"/><v:f eqn="if @4 @4 @6"/><v:f eqn="prod @7 @2 1"/> <v:f eqn="prod @6 @3 1"/><v:f eqn="prod #1 1 10000"/><v:f eqn="prod @10 10000 1"/> <v:f eqn="sum #1 0 @11"/><v:f eqn="if @10 @10 @12"/><v:f eqn="sum pixelwidth 0 @13"/> <v:f eqn="prod @14 @2 1"/><v:f eqn="prod @12 @3 1"/><v:f eqn="prod #2 1 10000"/> <v:f eqn="prod @17 10000 1"/><v:f eqn="sum #2 0 @18"/><v:f eqn="if @17 @17 @19"/> <v:f eqn="sum pixelwidth 0 @20"/><v:f eqn="prod @21 @2 1"/><v:f eqn="sum pixelheight 0 @19"/> <v:f eqn="prod @23 @3 1"/><v:f eqn="prod #3 1 10000"/><v:f eqn="prod @25 10000 1"/> <v:f eqn="sum #3 0 @26"/><v:f eqn="if @25 @25 @27"/><v:f eqn="prod @28 @2 1"/> <v:f eqn="sum pixelheight 0 @27"/><v:f eqn="prod @30 @3 1"/><v:f eqn="sum #4 #6 0"/> <v:f eqn="sum #5 #7 0"/><v:f eqn="sum @32 @33 0"/><v:f eqn="prod #4 @3 1"/> <v:f eqn="if @34 @35 @9"/><v:f eqn="prod #5 @2 1"/><v:f eqn="sum @0 0 @37"/> <v:f eqn="if @34 @38 0"/><v:f eqn="prod #6 @3 1"/><v:f eqn="sum @1 0 @40"/> <v:f eqn="if @34 @41 @9"/><v:f eqn="prod #7 @2 1"/><v:f eqn="if @34 @43 0"/> <v:f eqn="sum @7 0 #7"/><v:f eqn="if @45 @45 0"/><v:f eqn="prod @46 @2 1"/> <v:f eqn="sum @47 @43 0"/><v:f eqn="if @34 @48 0"/><v:f eqn="sum @6 0 #4"/> <v:f eqn="if @50 @50 0"/><v:f eqn="prod @51 @3 1"/><v:f eqn="sum @52 @35 0"/> <v:f eqn="if @34 @53 @9"/><v:f eqn="sum @13 0 #5"/><v:f eqn="if @55 @55 0"/> <v:f eqn="sum pixelwidth 0 @56"/><v:f eqn="prod @57 @2 1"/><v:f eqn="sum @58 0 @37"/> <v:f eqn="if @34 @59 0"/><v:f eqn="sum @12 0 #4"/><v:f eqn="if @61 @61 0"/> <v:f eqn="prod @62 @3 1"/><v:f eqn="sum @63 @35 0"/><v:f eqn="if @34 @64 @9"/> <v:f eqn="sum @20 0 #5"/><v:f eqn="if @66 @66 0"/><v:f eqn="sum pixelwidth 0 @67"/> <v:f eqn="prod @68 @2 1"/><v:f eqn="sum @69 0 @37"/><v:f eqn="if @34 @70 0"/> <v:f eqn="sum @19 0 #6"/><v:f eqn="if @72 @72 0"/><v:f eqn="sum pixelheight 0 @73"/> <v:f eqn="prod @74 @3 1"/><v:f eqn="sum @75 0 @40"/><v:f eqn="if @34 @76 @9"/> <v:f eqn="sum @28 0 #7"/><v:f eqn="if @78 @78 0"/><v:f eqn="prod @79 @2 1"/> <v:f eqn="sum @80 @43 0"/><v:f eqn="if @34 @81 0"/><v:f eqn="sum @27 0 #6"/> <v:f eqn="if @83 @83 0"/><v:f eqn="sum pixelheight 0 @84"/><v:f eqn="prod @85 @3 1"/> <v:f eqn="sum @86 0 @40"/><v:f eqn="if @34 @87 @9"/> </v:formulas> </v:shapetype> 

Huge template isn't it? But it is not scary, because JavaScript usually takes much more space, the template is placed only once on the page and is used by the vml-radius key specified in the ID attribute in the 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:

 <v:shape adj="16,16,16,16" fillcolor="#00ff00" style="width: 100px; height: 100px;" type="#vml-radius" /> 

here we have drawn a simple green square with round corners, whose radius is 16 pixels. As you notice the radius of the corners, we specify in the attribute adj="16,16,16,16" . And now let's add borders for this square, for example red:

 <v:group style="width: 100px; height: 100px;"> <v:shape adj="16,16,16,16" fillcolor="#00ff00" type="#vml-radius" /> <v:shape adj="16,16,16,16,10,10,10,10" fillcolor="#ff0000" type="#vml-radius" /> </v:group> 

Here we have created a group of layers, that is, a red border was imposed on the green square and, as you noticed, the adj attribute has additional parameters indicating the thickness of the border.

Sometimes it is necessary to make the corners not uniform, but oval. That is, the size of the angle vertically is one, and horizontally another, for example, such a square:

for this we adjust the adj parameter a bit:

 <v:group style="width: 100px; height: 100px;"> <v:shape adj="00320064,16,00320064,16" fillcolor="#00ff00" type="#vml-radius" /> <v:shape adj="00320064,16,00320064,16,10,10,10,10" fillcolor="#ff0000" type="#vml-radius" /> </v:group> 

Add a background:

 <v:group style="width: 100px; height: 100px;"> <v:shape adj="00320064,16,00320064,16" type="#vml-radius"> <v:fill type="tile" src="http://img-fotki.yandex.ru/get/4424/104967700.7f/0_7a378_1c3ad751_S.jpg" /> </v:shape> <v:shape adj="00320064,16,00320064,16,10,0,10,0" fillcolor="#ff0000" type="#vml-radius" /> </v:group> 

or fill with gradient:

 <v:group style="width: 100px; height: 100px;"> <v:shape adj="00320064,16,00320064,16" type="#vml-radius"> <v:fill type="gradient" angle="0" color="#D0E805" color2="#E88A05" /> </v:shape> <v:shape adj="00320064,16,00320064,16,10,0,10,0" fillcolor="#ff0000" type="#vml-radius" /> </v:group> 

Draw a landscape using a gradient:

 <v:group style="width: 100px; height: 100px;"> <v:shape adj="00320064,16,00320064,16" type="#vml-radius"> <v:fill type="gradient" method="sigma" angle="0" color="#ff0000" colors="40% #0fff00,60% #00fff0" color2="#0000ff" /> </v:shape> <v:shape adj="00320064,16,00320064,16,10,0,10,0" fillcolor="#ff0000" type="#vml-radius" /> </v:group> 

Options

Description of the standard parameters for the elements you can read the documentation such as Microsoft, I just describe the parameter adj , the parameter adj has 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 less than 10000 then the angles will be the same both horizontally and vertically. For example, entry 00320064 says that you need to draw an angle of 32 pixels horizontally and 64 pixels vertically. Roughly speaking, the number is divided into two parts: 0032/0064 . This specific implementation method had to be done for the reason that the adj parameter can 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 10,000 indicate:
LeftTopXY, RightTopXY, RightBottomXY, LeftBottomXY
at a value of 10,000 and above, indicate:
LeftTopX/LeftTopY, RightTopX/RightTopY, RightBottomX/RightBottomY, LeftBottomX/LeftBottomY

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

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

Problem parts

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

 <span style="position: relative; display: inline-block; padding: 20px;"> <v:shape adj="16,16,16,16" fillcolor="#00ff00" style="z-index: -1; position: absolute;" type="#vml-radius" /> test text </span> 

That is, for example, IE7 is quite normal to fit our box on the parent unit. But in IE8 this approach is no longer rolling.

What do you ask !? Of course, there is a way to do this in JavaScript, hang the onresize event on the parent block, and resize our square when this block changes. But this will lead to the fact that when you first load the page we will need to run through all the elements, set the initial dimensions, hang the event. This is all a chore and this is JavaScript, and in fact we are doing everything not to use JavaScript for these purposes.

To our joy, Microsoft didn’t completely cut us at this opportunity and left one VML element positioning from the parent HTML block. Although this element is not quite convenient, it gives an opportunity to get out of the problem situation. This item is called V:VMLFRAME . This is something like an iframe but for a vector.

VMLFRAME or another crutch

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

In the file we put our little square:

 <v:shape id="my-round" adj="16,16,16,16" fillcolor="#00ff00" style="width: 100%; height: 100%;" type="#vml-radius" /> 

Adding an ID with the name my-round , so that later, using this name, IE will determine which square we want to use.

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

 <span style="position: relative; display: inline-block; padding: 20px;"> <v:vmlframe style="z-index: -1; position: absolute;" src="internalvml.vml#my-round" /> test text </span> 

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

Conclusion

In conclusion I want to say that if something is not clear to you or you just want to add something, write in the comments and I will add / correct the article. I am not a whale to write articles, it’s my coding, but writing articles doesn’t work out quite well for me. So do not judge me, I tried)))

Good luck to everyone and nice rounding!