Rounded corners in HTML

Today, let's talk about the fillet in HTML and how to implement fillets.

At the earliest, we were all using images, making a rounded picture, making a background, or applying this picture in the corner of the container, so it was easy to do.

With the migration of time, it is found that there are too many small images, increasing the number of requests sent by the browser, and increasing the amount of data downloaded, and everyone is starting to flatten the design.

There are some properties in CSS3 that can be used to achieve fillets, but the support for ie6-8 is not good, and various browsers have their own rules of interpretation.

/* Universal Fillet  */.corner{    -moz-border-radius: 10px; /* Firefox -  */    -webkit-border-radius: 10px; /* safari and chrome -  */    border-radius: 10px;    behavior: url (.. /PUBLIC/CSS/PIE.HTC);  /*for ie*/    width:100px;    height : 100px;    background: #000000;} /*  Fillet  */.cornerT{    -moz-border-radius: 10px 10px 0px 0;  /* Firefox - */    -webkit-border-radius: 10px 10px  0px 0; /* safari and chrome - */    border-radius:  10px 10px 0px 0;    behavior: url (.. /PUBLIC/CSS/PIE.HTC);  /*for ie*/    width:100px;    height : 100px;&nbsP;   background: #000000;} /*  Bottom Fillet */.cornerb{    -moz-border-radius: 0 0 10px 10px; /*  Firefox - */    -webkit-border-radius: 0 0 10px 10px;  /* safari and chrome - */    border-radius: 0 0  10px 10px;    behavior: url (.. /PUBLIC/CSS/PIE.HTC);  /*for ie*/    width:100px;    height : 100px;    background: #000000;}

The main is three properties

-moz-border-radius:0 0 10px 10px; /* Firefox-*/-webkit-border-radius:0 0 10px 10px; /* Safari and Chrome-*/border-radius:0 0 10px 10px;

If compatible with IE8 version requires

Behavior:url (.. /PUBLIC/CSS/PIE.HTC); /*for ie*/

This sentence, need to download PIE.HTC file, there is a iecss3.htc file, I tried a bit, compatibility is not as good as PIE.HTC.

can also use Js,jquery has a plug-in jquery.corner.js, I also tried, in firefox30.0 incompatible, did not come out of effect.

The attachment is my code, you can download to try it.

This article is from the "Breaking It Architect" blog, so be sure to keep this source http://virusswb.blog.51cto.com/115214/1430032