IE7,IE8 Browser CSS Implementation of the positive fillet effect code

First, about IE7, IE8 does not support CSS3 Border-radius

CSS3 Border-radius can easily achieve a circle and rounded corners, however, the need to ie9+ browser to do. Mobile end naturally no problem, but many (especially for the C side) PC page is at least compatible with IE8, there is no way to make IE7, IE8 also support fillet?

A long, long time ago, I introduced a thing named pie that can achieve ie7,ie8 rounded corners, is a July 10 write "pie makes IE support CSS3 corner box shadow and gradient Rendering" (This article also has many other rounded angle method introduction).

The principle is the use of IE private behavior, in essence, JS code.

Here, to introduce an example of using a pure CSS to implement IE7,IE8 browser positive rounded corners.

Second, pure CSS to achieve IE7,IE8 rounded corners

We directly see the demo, you can ruthlessly click here: Ie7/ie8 Browser Pure CSS to achieve fillet demo

As a result, IE7 browser:

IE8 Browser:

Added in 2016-07-13
There are small partner comments reflect IE8 is not a positive circle, and then, today I deliberately opened 10 years ago or XP system notebook, using the original IE8 browser looked, in addition to the edge of the rough point, or is a circle, the following screenshot:

Therefore, it is possible to provide more information about the small partners who reflect the IE8 rounded corners. For example, the operating system, or whether it is tested in ietester similar software.

IE11 under:

IE9 Browser Round Corner

Fully compatible, the effect of great bang!

Implementation principle:
Ie9+ uses border-radius:50%, IE7,IE8 uses border simulations.

We usually use Border-style is generally solid solid line, other commonly used also dashed and dotted, our main character here is the dotted point, in IE browser, the dotted point is to be rendered into the round, the Chrome browser is a square.

Demo above, if we remove the parent of the Overflow,ie browser will be like this:

Chrome in the same condition is the square point:

So we can use this circle to achieve the rounded corners we want. We give a parent element, the same size, Overflow:hidden, only see the upper left corner of the circle, we can achieve the desired circular effect.

The relevant CSS code is as follows:

. box {
width:150px; height:150px;
position:relative;
/* Value shows the dot in the upper left corner * *
Overflow:hidden;
}
. Radius {
Position:absolute;
width:100%; height:100%;
BORDER:149PX dotted;
/* IE7,IE8 circle size to be small 1 pixels and 1 pixel offset *
margin:0 0 1px 1px;
Color: #cd0000;
}

is not very well understood. Full CSS and HTML code see demo.

Other Notes

This method does not apply to the IE6 browser because dotted in the IE6 browser is rendered in accordance with the dashed dotted line, not a circle.

Iii. deficiencies in this approach

The method described in this article can easily achieve a circular effect, and can be seamless and fully compatible. However, the problem is only to achieve a circle, if you want to achieve any size of the fillet effect, how to say it? Theoretically it can be achieved, however, many elements need to be spliced. Is the dotted border to simulate small rounded corners, the line part needs the rectangle to splice. However, obviously the cost is very high, in my opinion, in order to be doomed to eliminate the Ie7,ie8 browser so toss, is not cost-effective